html的盒子随页面动,JavaScript实现跟随鼠标移动的盒子

这篇文章主要为大家详细介绍了JavaScript实现跟随鼠标移动的盒子，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

效果图：

代码：

Document

div {

position: absolute;

top: 0px;

left: 0px;

width: 100px;

height: 100px;

background-color: red;

}

111111111

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;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持炫H5(xyhtml5.com)。