放大镜效果

标签：style   io   ar   sp   div   on   cti   bs   html   

放大镜效果的html 部分：

<div id="div1">
　　<img src="img/m1.jpg" />
　　<span id="mask"></span>
</div>
<div id="div2">
　　<img src="img/b1.jpg" />
</div>

两张一样的图片，一张大图，一张小图，两张图片的比例要合适

放大镜效果的JS部分：

<script>
window.onload=function(){
　　var oDiv1 = document.getElementById(‘div1‘);
　　var oDiv2 = document.getElementById(‘div2‘);
　　var oMask = document.getElementById(‘mask‘);
　　var oImg = oDiv2.getElementsByTagName(‘img‘)[0];
　　

　　//鼠标划过div1时小黄框和div2框显示
　　oDiv1.onmouseover=function(){
　　　　oDiv2.style.display=‘block‘;
　　　　oMask.style.display=‘block‘;
　　};

　　//鼠标离开的时候小黄框和div2隐藏
　　oDiv1.onmouseout=function(){
　　　　oDiv2.style.display=‘none‘;
　　　　oMask.style.display=‘none‘;
　　};
　　//小黄框在div1里移动的时候
　　oDiv1.onmousemove=function(ev){
　　　　var oEvent = ev||event;
　　　　var l = oEvent.clientX-oDiv1.offsetLeft-oMask.offsetWidth/2;
　　　　var t = oEvent.clientY-oDiv1.offsetTop-oMask.offsetHeight/2;
　　　　

　　　　//判断小黄框在DIV1里移动，不移到外面去,l 是判断左右t 判断上下
　　　　if(l<0){
　　　　　　l=0;
　　　　}else if(l>oDiv1.offsetWidth-oMask.offsetWidth){
　　　　　　l=oDiv1.offsetWidth-oMask.offsetWidth;
　　　　}

　　　　if(t<0){
　　　　　　t=0;
　　　　}else if(t>oDiv1.offsetHeight-oMask.offsetHeight){
　　　　　　t=oDiv1.offsetHeight-oMask.offsetHeight;
　　　　}
　　　　oMask.style.left=l+"px";

　　　　oMask.style.top=t+"px";

　　　　//算比例，小黄块移动的比例与右边图片的比例相同
　　　　oImg.style.left=-l/(oDiv1.offsetWidth-oMask.offsetWidth)*(oImg.offsetWidth-oDiv2.offsetWidth)+"px";

　　　　oImg.style.top=-t/(oDiv1.offsetHeight-oMask.offsetHeight)*(oImg.offsetHeight-oDiv2.offsetHeight)+"px";

　　};
};
</script>

总结：

感觉有两大难点

1，就是距离的算法

2，图片比例的算法

放大镜效果

标签：style   io   ar   sp   div   on   cti   bs   html   

原文地址：http://www.cnblogs.com/wujidns/p/4106836.html