js 图片放大效果 修正版_图象特效
- WBOY原创
- 2016-05-16 18:26:511210浏览
首先：我们需要一个可以移动的DIV
复制代码 代码如下:
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");
然后：我们需要控制他的移动范围
复制代码 代码如下:
解决了上面的我问题。那么这个效果就不难了。！
我们可以获得了 一个 x y, 恰好这个 x y 可以用来设置大图背景的 x y。
这里我们值得注意的事。要把握好大图与小图的比例。
还有就是显示图片的DIV 与移动的DIV 比例。
比如我这里的比例： 大图800*800 小图是200*200
显示大图的DIV 200*200 移动的div 50*50。
其实我还没总结出这个公式。绕的有点头晕呵呵。
下面我贴出全部代码：
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn