首先:我们需要一个可以移动的DIV
这个DIV可以移动,你可以测试下。
<div style="border:1px solid #CCC;position:absolute; 200px; height:100px; cursor:move;" id="jelle_test_divquot;> 这个DIV 可以移动,你可以测试下。 </div> <script type="text/javascript"> var getMouseP=function (e){//获取鼠标坐标 请传递evnet参数 e = e || window.event; var m=(e.pageX || e.pageY)?{ x:e.pageX, y:e.pageY } : { x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop }; return m; }; move=function(o,t){ o=$j(o); t=$j(t); o.onmousedown=function(ev){ var mxy=getMouseP(ev);//获取当前鼠标坐标 var by={x:mxy.x-(t.offsetLeft),y:mxy.y-(t.offsetTop)}; o.style.cursor="move"; document.onmousemove=function(ev){ var mxy=getMouseP(ev); t.style.left=mxy.x-by.x+"px"; t.style.top=mxy.y-by.y+"px"; }; document.onmouseup=function(){ window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); this.onmousemove=null; } } } move("jelle_test_div","jelle_test_div"); </script>
下面我贴出全部代码:
<!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" /> <meta name="Author" content="jelle.lu jelle.lu[at]gmail.com" /> <title>图片放大效果</title> </head> <body> <style type="text/css"> .img_box,.show_box{border:1px solid #CCC; 200px;height:200px;float:left;float:left;margin:20px;margin:20px; overflow:hidden;} .img_box,.show_box{ background-position:0 0; background-repeat:no-repeat; } .ms_box{50px; height:50px;border:1px solid #CCC;background:#000;filter:alpha(opacity=20);opacity:0.2; display:none} .show_box{display:none} </style> <!--html--> <div class="img_box" id="j_warp"> <div class="ms_box" id="j_ms"></div> </div> <div class="show_box" id="j_show"></div> <!--end--> <!--辅助--> <div style="clear:both;"></div> <input type="button" value="OK!我想换张图片" style="margin-left:50px;" onclick="jelle(imgss[Math.floor(Math.random()*4)]);" /> <!--辅助 end--> <script type="text/javascript"> var $j=function(id){return document.getElementById(id);}; var getstyle=function (obj,attribute){ return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute] }; var mp=function (e,j){//获取鼠标坐标 请传递evnet参数 e = e || window.event; return (e.pageX || e.pageY)?{ x:e.pageX, y:e.pageY } : {x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop + j}; }; var sys=(function(){//不必紧张这只是一个判断浏览器的函数,你可以使用很多方法来判断浏览器 window.sys={}; var ua=navigator.userAgent.toLowerCase(); sys.firefox=ua.match(/firefox\/([\d\.]+)/); sys.ie=ua.match(/msie\s([\d\.]+)/); sys.chrome=ua.match(/chrome\/([\d\.]+)/); return sys; })() var zoomImg=function(imgs){ var o=$j("j_warp"),//鼠标相应的区域 t=$j("j_ms"),//跟随鼠标移动的div s=$j("j_show"),//显示大图的div by_o={x:o.offsetLeft,y:o.offsetTop},//最外面容器 具体页面的 x,y msw=parseInt(getstyle(t,"width")),//跟随鼠标移动的DIV宽度 msh=parseInt(getstyle(t,"height")),//高度 maxy=parseInt(getstyle(o,"height"))-msh,//减去移动框的高度 MS_box的拖动界限 y maxx=parseInt(getstyle(o,"width"))-msw,//减去移动框的宽度 MS_box的拖动界限 x toggle=function(status){//用户鼠标激活以后显示或者隐藏需要的box t.style.display=status; s.style.display=status; }, setBackgroundImg=function(imgs){ o.style.backgroundImage='url('+imgs['small']+')'; s.style.backgroundImage='url('+imgs['big']+')'; }, j=0;//被卷曲的高度 --IE获得鼠标的坐标还要加上被卷曲的高度 //当然其实还应该加上 --水平被卷曲的高度。这里没做。一般也不需要 setBackgroundImg(imgs); if(sys.ie){ window.onscroll=function(){//哎 为了获取一个被卷去的高度 居然写了N多代码。看样子是该写个通用的方法了。 j=parent?(parent.document.body.scrollTop+parent.document.documentElement.scrollTop) : (document.body.scrollTop+document.documentElement.scrollTop); } }; o.onmousemove=function(e){ toggle("block");//显示盒子 //var by={x:t.offsetLeft,y:t.offsetTop}; var ms=mp(e,j),//获取当前鼠标位置 jy=ms.y-by_o.y-msw/2, //获取当前移动的ms_box位置 计算方法是 鼠标坐标 - 最外面容器的坐标 - 盒子的宽(高)的/2 jx=ms.x-by_o.x-msh/2, y= jy>=maxy ? maxy : jy<=-1? -1 : jy,//判断是否超过界限 x= jx>=maxx ? maxx : jx<=-1? -1 : jx, xx= x*4 < 0 ? 0 : x*4,//计算显示box的背景 的 x y yy= y*4 < 0 ? 0 : y*4;//这里*4 是因为我的大图跟小图的比例是4:1 请注意大盒子与小盒子的比例也要4:1 //不然可能会给你带来麻烦。当然你也可以使用其他比例! t.style.marginTop=y+"px";//设置ms_box的位置 t.style.marginLeft=x+"px"; $j("j_show").style.backgroundPosition="-"+xx+"px -"+yy+"px";//设置背景的xy坐标 } o.onmouseout=function(){ toggle("none"); } return setBackgroundImg;//我们返回这个换图的方法。这样就可以变换图片了。 } //----------- var imgss=[ {'big':"http://images.365sleep.com/taobao/100222/b1.jpg",'small':"http://images.cnblogs.com/cnblogs_com/idche/245996/r_s1.jpg"}, {'big':"http:///images.365sleep.com/taobao/100222/b2.jpg",'small':"http://images.cnblogs.com/cnblogs_com/idche/245996/r_s2.jpg"}, {'big':"http://images.365sleep.com/taobao/100222/b3.jpg",'small':"http://images.cnblogs.com/cnblogs_com/idche/245996/r_s3.jpg"}, {'big':"http://images.365sleep.com/taobao/100222/b4.jpg",'small':"http://images.cnblogs.com/cnblogs_com/idche/245996/r_s4.jpg"} ];//img地址数据 var jelle=zoomImg(imgss[3])//开始,了我比较喜欢最后一组图片 </script> </body> </html>