Rumah > hujung hadapan web > tutorial js > js 图片放大效果 修正版_图象特效

js 图片放大效果 修正版_图象特效

WBOY
Lepaskan: 2016-05-16 18:26:51
asal
1194 orang telah melayarinya

首先:我们需要一个可以移动的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。
其实我还没总结出这个公式。绕的有点头晕呵呵。
下面我贴出全部代码:
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan