【Jquery版】仿Acdsee看图插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link rel="stylesheet" type="text/css" href="yui_cssreset.css"/> <style type="text/css"> .bgBox{position:absolute;z-index:990;background:#000;opacity:0.9;width:100%;height:160%;left:0px;top:0px;filter:alpha(opacity=90);cursor:pointer;} .upBox{position:fixed;z-index:999;border:2px #999 solid;cursor:move;} .upBox img{cursor:move} </style> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> ;(function($){ $.fn.extend({ acdSee:function(options){ var defaults={}, x,y,_x,_y,oX,oY, initC=[],//初始化居中 sT=0,//滚动条高度 i=0,//放大缩小因子 broswer; sW=document.documentElement.clientWidth, sH=document.documentElement.clientHeight; sT===0?initC[2]=0:initC[2]=sT+sH; /(Firefox)/.test(navigator.userAgent)?broswer="DOMMouseScroll":broswer="mousewheel"; //滚动事件,获取卷曲高度 $(window).scroll(function(){sT=$(this).scrollTop();}) //点击出现弹出层 $(this).click(function(){ var oSrc=$(this).attr('src'), oW=$(this).width(), oH=$(this).height(); initC[0]=Math.ceil((sW-oW)/2); initC[1]=Math.ceil(((sH-oH)/2)); $("body").append("<div class='bgBox'></div><div class='upBox'><img src='"+oSrc+"'width='"+oW+"' height='"+oH+"' id='upImg' /></div>"); $("body,html").css("overflow","hidden"); $(".upBox").css({"left":initC[0],"top":initC[1]}); $(".bgBox").css({"left":0,"top":initC[2]}); }); //阻止图片默认事件 $(document).delegate("#upImg","mousedown",function(e){ stopDefault(e)}); //拖拽图层 $(document).delegate(".upBox","mousedown",function(e){ if(/(0|1)/.test(e.button)){ oX=parseInt(this.style.left); oY=parseInt(this.style.top); x=e.pageX-oX; y=e.pageY-oY; $(".upBox").mousemove(function(e){ _x=e.pageX-x; _y=e.pageY-y; $(".upBox").css({"left":_x,"top":_y}) .mouseup(function(e){$(".upBox,.images").unbind("mousemove");}); $(document).mouseleave(function(e){$(".upBox,.images").unbind("mousemove");}) }); //阻止图片默认事件 $(".upBox img").mousedown(function(e){stopDefault(e)}); }else{return false;} }); //退出 $(document).delegate(".bgBox","click",function(){ $(this).next().empty().remove(); $(this).remove(); $("body,html").css("overflow",'auto') }); //图片放大缩小计算 $(document).bind(broswer,function(e){ if($('.bgBox').length){ var oImg=$(".upBox").find('img'), mW=oImg.width(), mH=oImg.height(), dW=Number(oImg.attr('width')), dH=Number(oImg.attr('height')); if(e.originalEvent.detail !=0){ e.originalEvent.detail>0?Zoom(mW,mH,dW,dH,oImg):Narrow(mW,mH,dW,dH,oImg); }else{ event.wheelDelta<0?Zoom(mW,mH,dW,dH,oImg):Narrow(mW,mH,dW,dH,oImg); } } }); //放大函数 function Zoom(mWidth,mHeight,dW,dH,obj){ var eW,eH, parentP=obj.parent(".upBox"), pX=parseInt(parentP.css("left")), pY=parseInt(parentP.css("top")); if(i<1){ i=Number((i+=.1).toFixed(1)); eW=Math.ceil(dW+dW*i); eH=Math.ceil(dH+dH*i); pX-=(eW-mWidth)/2; pY-=(eH-mHeight)/2; obj.width(eW).height(eH); parentP.css({"left":pX,"top":pY}); console.log(pX,pY) } } //缩小函数 function Narrow(mWidth,mHeight,dW,dH,obj){ var eW,eH, parentP=obj.parent(".upBox"), pX=parseInt(parentP.css("left")), pY=parseInt(parentP.css("top")); if(i>0){ i=Number((i-=.1).toFixed(1)); eW=Math.ceil(dW+dW*i); eH=Math.ceil(dH+dH*i); pX-=(eW-mWidth)/2; pY-=(eH-mHeight)/2; obj.width(eW).height(eH); parentP.css({"left":pX,"top":pY}); } } //传入操作对象e而不是window.event,同时支持w3c的preventDefalut()方法所以是其它浏览器 function stopDefault( e ) { if ( e && e.preventDefault ) { e.preventDefault(); }else { window.event.returnValue = false; //ie return false; } }; } }) }(jQuery)) </script> <script type="text/javascript"> $(function(){ $("img").acdSee(); }) </script> </head> <body> <img src="http://www.w3cfuns.com/data/attachment/album/201211/12/102713idcpenm4ttcml3en.jpg" width="640" height="476" alt="" /> </body> </html>
兼容：IE9+，Chrome , Firefox ；
功能：拖拽弹出层图片，放大缩小，点击背景层退出；
特点：无论拖拽到哪个位置，都以图片中心为原点放大；
问题：在IE8以下，拖拽有BUG，百思不得其解，各位看官如有解决之法，还望不吝赐教！
转载请注明出处：Janking's Blog