当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js 图片放大效果 修正版

js 图片放大效果 修正版

2019年07月29日  | 移动技术网IT编程  | 我要评论
首先：我们需要一个可以移动的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。
其实我还没总结出这个公式。绕的有点头晕呵呵。
下面我贴出全部代码：

[ctrl+a 全选 注:如需引入外部js需刷新才能执行]

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网