首先：我们需要一个可以移动的DIV 复制代码 代码如下:<div style="border:1px solid #CCC;position:absolute; width: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> 然后：我们需要控制他的移动范围 复制代码 代码如下:<div style="border:1px solid #CCC; width:500px; height:415px; background:url(xxx/c.jpg);" id="jelle_warpper"> <div style="width:100px; height:50px; border:1px solid #CCC;" id="jelle_move"></div> </div> <script type="text/javascript"> var mp=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; } var move2=function(o,t){//请提前设置CSS position:absolute;并激活filter:alpha(opacity=100); //o相应鼠标拖动的区域ID T被移动对象的ID o=$j(o); t=$j(t); by_o={x:o.offsetLeft,y:o.offsetTop}; o.onmousemove=function(ev){ //var mxy=Jelle.getMouseP(ev);//获取当前鼠标坐标 var by={x:t.offsetLeft,y:t.offsetTop}; var ms=mp(ev); t.innerHTML=(by_o.x-by.x)+"---"+(by_o.x-by.y); jy=ms.y-by_o.y-25; jx=ms.x-by_o.x-50; maxy=415-50;//减去移动框的高度 maxx=500-100;//减去移动框的宽度 var y=jy>=maxy?maxy:jy<=0?0:jy; var x=jx>=maxx?maxx:jx<=0?0:jx; t.style.marginTop=y+"px"; t.style.marginLeft=x+"px"; } } move2("jelle_warpper","jelle_move") </script> 解决了上面的我问题。那么这个效果就不难了。！ 我们可以获得了 一个 x y, 恰好这个 x y 可以用来设置大图背景的 x y。 这里我们值得注意的事。要把握好大图与小图的比例。 还有就是显示图片的DIV 与移动的DIV 比例。 比如我这里的比例： 大图800*800 小图是200*200 显示大图的DIV 200*200 移动的div 50*50。 其实我还没总结出这个公式。绕的有点头晕呵呵。 下面我贴出全部代码： 图片放大效果 .img_box,.show_box{border:1px solid #CCC; width: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{width:50px; height:50px;border:1px solid #CCC;background:#000;filter:alpha(opacity=20);opacity:0.2; display:none} .show_box{display:none} [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　推荐阅读

　　javascript Array数组对象的扩展函数代码

今天重点讲下 如何给Array对象扩展 1、直接在Array.prototype 上扩展 2、用自己方法对数组对象进行扩展 直接在Array.prototype上扩展,不能直接对dom对象使用(如:document.getElementsByTagName('div')得到的nodeLi>>>详细阅读

本文标题：js 图片放大效果 修正版

地址：http://www.17bianji.com/kaifa2/JS/26355.html

 1/2    1