首頁 > web前端 > js教程 > js 图片放大效果 修正版_图象特效

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

WBOY
發布: 2016-05-16 18:26:51
原創
1194 人瀏覽過

首先:我们需要一个可以移动的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。
其实我还没总结出这个公式。绕的有点头晕呵呵。
下面我贴出全部代码:
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板