放大镜 <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>
黑色箭头:
1
2
|
var x = e.clientX;
var y = e.clientY;
|
红色箭头:
1
2
|
var t = bbox.offsetTop;
var l = bbox.offsetLeft;
|
橙色箭头:
1
2
|
var _left = x - l - bmove.offsetWidth/2;
var _top = y - t -bmove.offsetHeight/2;
|
2、bimg块的计算
利用move块在可移动范围内的比例来设置大图的位置
move块的移动范围:
1 |
bbox.offsetWidth-bmove.offsetWidth
|
move块现在的坐标占可移动范围的比例:
1
2
|
var w = _left/(bbox.offsetWidth-bmove.offsetWidth);
var h = _top/(bbox.offsetHeight-bmove.offsetHeight);
|
bimg的移动范围:
1 |
b_bimg.offsetHeight-bbimg.offsetHeight
|
bimg的位置:
1
2
|
var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;
var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;
|
Atas ialah kandungan terperinci js实现放大镜特效的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan:Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn