您现在的位置是：首页 > 文章详情

javascript元素跟随鼠标在指定区域运动

日期：2018-06-01点击：342收藏

元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中，下面是完整的Demo：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标区域</title> <style type="text/css"> *{margin:0;padding:0;} .area{ width:400px; height:400px; margin:30px auto; background: #ccc; overflow: hidden; position: relative; } .hover{ border:1px dashed #000; width:100px; height:100px; background: rgba(0,0,0,0.25); position: absolute; display: none; cursor: move; } </style> </head> <body> <div id="area" class="area"> <div class="hover" id="hover"> </div> <script type="text/javascript"> var $box = document.getElementById("area"); var $hover = document.getElementById("hover"); var boxW=$box.offsetWidth, boxH=$box.offsetHeight, boxLeft=$box.offsetLeft, boxTop=$box.offsetTop; var startX,startY,hoverW,hoverH; $box.onmouseover=function(event){ var event=event||window.event; $hover.style.display="block"; hoverW=$hover.offsetWidth, hoverH=$hover.offsetHeight; var x = event.clientX; var y = event.clientY; $hover.style.left=(x-boxLeft-hoverW/2)+"px"; $hover.style.top=(y-boxTop-hoverH/2)+"px"; console.log(boxW+"<br/>"+hoverW) } $box.onmousemove=function(event){ var event=event||window.event; var x = event.clientX; var y = event.clientY; var resultX,resultY; if(x-boxLeft-50<0){ resultX=0; }else if(x-boxLeft-50>=boxW-hoverW){ resultX=boxW-hoverW; }else{ resultX=x-boxLeft-50; } if(y-boxTop-50<0){ resultY=0 }else if(y-boxTop-50>=boxH-hoverH){ resultY=boxH-hoverH; }else{ resultY=y-boxTop-50; } $hover.style.left=resultX+"px"; $hover.style.top=resultY+"px"; } $box.onmouseout = function(event) { var event=event||window.event; var x = event.clientX; var y = event.clientY; var divx1 = $box.offsetLeft; var divy1 = $box.offsetTop; var divx2 = $box.offsetLeft + $box.offsetWidth; var divy2 = $box.offsetTop + $box.offsetHeight; if (x < divx1 || x > divx2 || y < divy1 || y > divy2) { $hover.style.display="none"; } } </script> </body> </html>

主要是两个关键点：

1、获取鼠标当前位置，然后设置运动元素的当前位置为鼠标位置；

2、判断元素是否靠近父级元素的边界，设置临界值；

原文链接：https://yq.aliyun.com/articles/678403

关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。