JavaScript实现跟随鼠标移动的盒子

本文实例为大家分享了JavaScript实现跟随鼠标移动的具体代码，供大家参考，具体内容如下

跟随鼠标移动的盒子(包括检测边界值)

效果图：

代码：

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title></head><style>div {position: absolute;top: 0px;left: 0px;width: 100px;height: 100px;background-color: red;}</style><body><div>111111111</div><script>var div = document.getElementsByTagName(\'div\')[0];div.onmousedown = function(e) {e = window.event || e;// 鼠标按下 获取鼠标距离页面左侧距离var x = e.clientX;// 获取鼠标距离页面上侧距离var y = e.clientY;// 元素距离页面左侧距离var elex = div.offsetLeft;// 元素距离页面上侧距离var eley = div.offsetTop;// 相减得到鼠标距离元素的距离var X = x - elex;var Y = y - eley;console.log(X, Y);document.onmousemove = function(e) {e = window.event || e;// 鼠标移动过程中 获取鼠标距离页面距离var movex = e.clientX;var movey = e.clientY;// 1.左侧边界值// 元素移动过程中距离页面左侧距离var leftx = movex - X;var lefty = movey - Y;// 1.左侧边界值if (leftx <= 0) {leftx = 0;}// 2.上侧边界值if (lefty <= 0) {lefty = 0}// 3.右侧边界值// 页面可视区宽 -元素宽var rightx = document.documentElement.clientWidth - div.offsetWidth;if (leftx >= rightx) {leftx = rightx}// 4.下侧边界值// 页面可视区高 -元素高var righty = document.documentElement.clientHeight - div.offsetHeight;if (lefty >= righty) {lefty = righty;}// 鼠标移动过程中 获取鼠标距离页面距离 - 鼠标距离元素的距离 =元素的left top值div.style.left = leftx + \'px\';div.style.top = lefty + \'px\';}// 抬起清除移动事件document.onmouseup = function() {document.onmousemove = null;}// 阻止默认事件return false;}</script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章: