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>

 

 

 

 

 

黑色箭头：

var x = e.clientX;//鼠标相对于视口的位置
var y = e.clientY;

红色箭头：

var t = bbox.offsetTop;//box相对于视口的位置
var l = bbox.offsetLeft;

橙色箭头：

var _left = x - l - bmove.offsetWidth/2;//计算move的位置
var _top = y - t -bmove.offsetHeight/2;

2、bimg块的计算

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

move块的移动范围：

bbox.offsetWidth-bmove.offsetWidth

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

var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例
var h = _top/(bbox.offsetHeight-bmove.offsetHeight);

bimg的移动范围：

b_bimg.offsetHeight-bbimg.offsetHeight

bimg的位置：

var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置
var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;

以上就是js实现放大镜特效的实例代码的详细内容，更多请关注php中文网其它相关文章！