js实现放大镜特效的实例代码

 
 
 

 
 <script><br>   function bigimg(){<br>  var bbox = document.getElementById("box");<br>  var bmove = document.getElementById("move");<br>  var bbimg = document.getElementById("bimg");<br>  var b_bimg = document.getElementById("b_bimg");<br>  bbox.onmouseover = function(){//鼠标移动到box上显示大图片和选框<br>bbimg.style.display = "block";<br>bmove.style.display="block";<br>  }<br>  bbox.onmouseout = function(){//鼠标移开box不显示大图片和选框<br>bbimg.style.display = "none";<br>bmove.style.display="none";<br>  }<br>  bbox.onmousemove = function(e){//获取鼠标位置<br>var x = e.clientX;//鼠标相对于视口的位置<br>var y = e.clientY;<br>var t = bbox.offsetTop;//box相对于视口的位置<br>var l = bbox.offsetLeft;<br>var _left = x - l - bmove.offsetWidth/2;//计算move的位置<br>var _top = y - t -bmove.offsetHeight/2;<br>if(_top<=0)//滑到box的最顶部<br/> _top = 0;<br/>else if(_top>=bbox.offsetHeight-bmove.offsetHeight)//滑到box的最底部<br>  _top = bbox.offsetHeight-bmove.offsetHeight ;<br>if(_left<=0)//滑到box的最左边<br/> _left=0;<br/>else if(_left>=bbox.offsetWidth-bmove.offsetWidth)//滑到box的最右边<br>  _left=bbox.offsetWidth-bmove.offsetWidth ;<br>bmove.style.top = _top +"px";//设置move的位置<br>bmove.style.left = _left + "px";<br>var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例<br>var h = _top/(bbox.offsetHeight-bmove.offsetHeight);<br>var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置<br>var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;<br>b_bimg.style.top = -b_bimg_top + "px";//设置大图的位置信息<br>b_bimg.style.left = -b_bimg_left + "px";<br>  }<br><br> }<br>  </script>

 

 

 

 

 

黑色箭头：

红色箭头：

橙色箭头：

2、bimg块的计算

利用move块在可移动范围内的比例来设置大图的位置

move块的移动范围：

move块现在的坐标占可移动范围的比例：

bimg的移动范围：

bimg的位置：

以上是js实现放大镜特效的实例代码的详细内容。更多信息请关注PHP中文网其他相关文章！