js 图片放大效果 修正版

首先：我们需要一个可以移动的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}

var $j=function(id){return document.getElementById(id);};
var getstyle=function (obj,attribute){
return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute]
};
var mp=function (e,j){//获取鼠标坐标 请传递evnet参数
e = e || window.event;
return (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 + j};
};
var sys=(function(){//不必紧张这只是一个判断浏览器的函数,你可以使用很多方法来判断浏览器
window.sys={};
var ua=navigator.userAgent.toLowerCase();
sys.firefox=ua.match(/firefox\/([\d\.]+)/);
sys.ie=ua.match(/msie\s([\d\.]+)/);
sys.chrome=ua.match(/chrome\/([\d\.]+)/);
return sys;
})()
var zoomImg=function(imgs){
var o=$j("j_warp"),//鼠标相应的区域
t=$j("j_ms"),//跟随鼠标移动的div
s=$j("j_show"),//显示大图的div
by_o={x:o.offsetLeft,y:o.offsetTop},//最外面容器 具体页面的 x,y
msw=parseInt(getstyle(t,"width")),//跟随鼠标移动的DIV宽度
msh=parseInt(getstyle(t,"height")),//高度
maxy=parseInt(getstyle(o,"height"))-msh,//减去移动框的高度 MS_box的拖动界限 y
maxx=parseInt(getstyle(o,"width"))-msw,//减去移动框的宽度 MS_box的拖动界限 x
toggle=function(status){//用户鼠标激活以后显示或者隐藏需要的box
t.style.display=status;
s.style.display=status;
},
setBackgroundImg=function(imgs){
o.style.backgroundImage='url('+imgs['small']+')';
s.style.backgroundImage='url('+imgs['big']+')';
},
j=0;//被卷曲的高度 --IE获得鼠标的坐标还要加上被卷曲的高度
//当然其实还应该加上 --水平被卷曲的高度。这里没做。一般也不需要
setBackgroundImg(imgs);
if(sys.ie){
window.onscroll=function(){//哎 为了获取一个被卷去的高度 居然写了N多代码。看样子是该写个通用的方法了。
j=parent?(parent.document.body.scrollTop+parent.document.documentElement.scrollTop) :
(document.body.scrollTop+document.documentElement.scrollTop);
}
};
o.onmousemove=function(e){
toggle("block");//显示盒子
//var by={x:t.offsetLeft,y:t.offsetTop};
var ms=mp(e,j),//获取当前鼠标位置
jy=ms.y-by_o.y-msw/2,
//获取当前移动的ms_box位置 计算方法是 鼠标坐标 - 最外面容器的坐标 - 盒子的宽(高)的/2
jx=ms.x-by_o.x-msh/2,
y= jy>=maxy ? maxy : jy=maxx ? maxx : jx

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]