jquery放大鏡效果超漂亮噢
更新時間:2013年11月15日 08:45:13 作者:
放大鏡效果想必大家都有見到過吧,就是圖片的局部放大,下面有個不錯的這個放大鏡的代碼挺簡單滴效果也不錯,感興趣的朋友可以練練手
這個放大鏡的代碼挺簡單滴效果也不錯。
<script>
//QQ:496928838 微涼
$(function(){
$("#demo").enlarge(
{
// 鼠標遮罩層樣式
shadecolor: "#FFD24D",
shadeborder: "#FF8000",
shadeopacity: 0.4,
cursor: "move",
// 大圖外層樣式
layerwidth: 480,
layerheight: 360,
layerborder: "#DDD",
fade: true,
// 大圖尺寸
largewidth: 960,
largeheight: 720
});
});
</script>
<a href="demo.jpg" id="demo" style="position: relative;float: left;">
<img src="demosmall.jpg" width="240" height="180">
<img src="demo.jpg" width="960" height="720" style="display: none;">
</a>

/*
Enlarge for jQuery v1.0
Abel Yao, 2013
*/
(function(e){var i={shadecolor:"#FFD24D",shadeborder:"#FF8000",shadeopacity:.5,cursor:"move",layerwidth:400,layerheight:300,layerborder:"#DDD",fade:true,largewidth:1280,largeheight:960};var t=function(t){t=e.extend({},i,t);e(this).each(function(){var i=e(this).css("position","relative");var h=i.children().first();var r={x:h.width()/t.largewidth,y:h.height()/t.largeheight};var o={shade:{width:t.layerwidth*r.x-2,height:t.layerheight*r.y-2}};var a=e("<div>").css({position:"absolute",left:"0px",top:"0px","background-color":t.shadecolor,border:"1px solid "+t.shadeborder,width:o.shade.width,height:o.shade.height,opacity:t.shadeopacity,cursor:t.cursor});a.hide().appendTo(i);var d=e("<img>").css({position:"absolute",display:"block",width:t.largewidth,height:t.largeheight});var s=e("<div>").css({position:"absolute",left:i.width()+5,top:0,"background-color":"#111",overflow:"hidden",width:t.layerwidth,height:t.layerheight,border:"1px solid "+t.layerborder});d.attr("src",i.attr("href"));d.appendTo(s);s.hide().appendTo(i);var n={x:o.shade.width/2,y:o.shade.height/2};var l={width:i.innerWidth()-a.outerWidth(),height:i.innerHeight()-a.outerHeight()};var g=function(){a.show();if(t.fade)s.stop().fadeIn(300);else s.show()};var c=function(){a.hide();s.hide()};var f=i.offset();i.mousemove(function(e){var t=e.pageX-f.left;var h=e.pageY-f.top;if(t<0||t>i.innerWidth())return c();if(h<0||h>i.innerHeight())return c();t=t-n.x;h=h-n.y;if(t<0)t=0;if(h<0)h=0;if(t>l.width)t=l.width;if(h>l.height)h=l.height;a.css({left:t,top:h});d.css({left:0-t/r.x,top:0-h/r.y})}).mouseenter(g).mouseleave(c)})};e.fn.extend({enlarge:t})})(jQuery);
下載地址:http://pan.baidu.com/s/1zilrC
復制代碼 代碼如下:
<script>
//QQ:496928838 微涼
$(function(){
$("#demo").enlarge(
{
// 鼠標遮罩層樣式
shadecolor: "#FFD24D",
shadeborder: "#FF8000",
shadeopacity: 0.4,
cursor: "move",
// 大圖外層樣式
layerwidth: 480,
layerheight: 360,
layerborder: "#DDD",
fade: true,
// 大圖尺寸
largewidth: 960,
largeheight: 720
});
});
</script>
<a href="demo.jpg" id="demo" style="position: relative;float: left;">
<img src="demosmall.jpg" width="240" height="180">
<img src="demo.jpg" width="960" height="720" style="display: none;">
</a>

復制代碼 代碼如下:
/*
Enlarge for jQuery v1.0
Abel Yao, 2013
*/
(function(e){var i={shadecolor:"#FFD24D",shadeborder:"#FF8000",shadeopacity:.5,cursor:"move",layerwidth:400,layerheight:300,layerborder:"#DDD",fade:true,largewidth:1280,largeheight:960};var t=function(t){t=e.extend({},i,t);e(this).each(function(){var i=e(this).css("position","relative");var h=i.children().first();var r={x:h.width()/t.largewidth,y:h.height()/t.largeheight};var o={shade:{width:t.layerwidth*r.x-2,height:t.layerheight*r.y-2}};var a=e("<div>").css({position:"absolute",left:"0px",top:"0px","background-color":t.shadecolor,border:"1px solid "+t.shadeborder,width:o.shade.width,height:o.shade.height,opacity:t.shadeopacity,cursor:t.cursor});a.hide().appendTo(i);var d=e("<img>").css({position:"absolute",display:"block",width:t.largewidth,height:t.largeheight});var s=e("<div>").css({position:"absolute",left:i.width()+5,top:0,"background-color":"#111",overflow:"hidden",width:t.layerwidth,height:t.layerheight,border:"1px solid "+t.layerborder});d.attr("src",i.attr("href"));d.appendTo(s);s.hide().appendTo(i);var n={x:o.shade.width/2,y:o.shade.height/2};var l={width:i.innerWidth()-a.outerWidth(),height:i.innerHeight()-a.outerHeight()};var g=function(){a.show();if(t.fade)s.stop().fadeIn(300);else s.show()};var c=function(){a.hide();s.hide()};var f=i.offset();i.mousemove(function(e){var t=e.pageX-f.left;var h=e.pageY-f.top;if(t<0||t>i.innerWidth())return c();if(h<0||h>i.innerHeight())return c();t=t-n.x;h=h-n.y;if(t<0)t=0;if(h<0)h=0;if(t>l.width)t=l.width;if(h>l.height)h=l.height;a.css({left:t,top:h});d.css({left:0-t/r.x,top:0-h/r.y})}).mouseenter(g).mouseleave(c)})};e.fn.extend({enlarge:t})})(jQuery);
下載地址:http://pan.baidu.com/s/1zilrC
相關文章
jQuery插件Slider Revolution實現(xiàn)響應動畫滑動圖片切換效果
Slider Revolution插件是一款非常強大的插件了,我們可以利用它來制作出各種效果并且還支持移動設備,支持手機觸摸,鍵盤翻頁;它內(nèi)置幻燈、視頻播放計時器等等效果,具體我們來看看。2015-06-06
jquery使用slideDown實現(xiàn)模塊緩慢拉出效果的方法
這篇文章主要介紹了jquery使用slideDown實現(xiàn)模塊緩慢拉出效果的方法,涉及slideDown方法操作模塊展示效果的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jQuery-1.9.1源碼分析系列(十一)DOM操作續(xù)之克隆節(jié)點
這篇文章主要介紹了jQuery-1.9.1源碼分析系列(十一)DOM操作續(xù)之克隆節(jié)點的相關資料,需要的朋友可以參考下2015-12-12
treepanel動態(tài)加載數(shù)據(jù)實現(xiàn)代碼
本文介紹一個treepanel動態(tài)加載數(shù)據(jù)的例子,需要了解的朋友可以參考下2012-12-12
jQuery Ajax Post 回調(diào)函數(shù)不執(zhí)行問題的解決方法
本文是小編給大家?guī)淼膉Query Ajax Post 回調(diào)函數(shù)不執(zhí)行的原因及解決方法,在本文最下面還給大家附加jquery Ajax 不執(zhí)行回調(diào)函數(shù)success的原因,這兩個問題都非常多見,感興趣的朋友一起看下吧2016-08-08
jQuery DataTables插件自定義Ajax分頁實例解析
這篇文章主要為大家詳細介紹了jQuery DataTables插件自定義Ajax分頁的相關資料,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-05
JQuery調(diào)webservice實現(xiàn)郵箱驗證(檢測是否可用)
JQuery調(diào)webservice實現(xiàn)郵箱驗證:判斷郵箱是否存在如果不存在提示可以使用否從提示該郵箱已存在請重新輸入,感興趣的朋友可以參下哈,希望對你有所幫助2013-05-05

