这个放大镜的代码挺简单滴效果也不错。
复制代码 代码如下:
复制代码 代码如下:
/*
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().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().css({position:absolute,display:block,width:t.largewidth,height:t.largeheight});var s=e().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(ti.innerwidth())return c();if(hi.innerheight())return c();t=t-n.x;h=h-n.y;if(tl.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