本文介绍利用JavaScript的onmousemove事件获取鼠标实时坐标，并通过遍历DOM元素将前一个DIV的位置传递给后一个DIV，从而实现鼠标移动时多个DIV依次跟随移动的接龙效果。代码包含兼容性处理及坐标计算逻辑。
效果展示与实现思路
效果展示
实现思路
核心逻辑是通过监听onmousemove事件捕获鼠标当前的坐标位置，随后遍历页面上的所有DIV元素，将获取到的鼠标坐标依次赋值给各个DIV，从而形成跟随效果。
完整代码实现
代码实现
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
复制代码
具体代码如下
<head runat="server">
<title></title>
<style type="text/css">
div
{
width: 20px;
height: 20px;
background: #00FFFF;
position: absolute;
}
</style>
<script type="javascript">
document.onmousemove = function (ev) {
var div = document.getElementsByTagName('div');
var oEvent = ev || event; //判断兼容性
var pos = GetMouse(oEvent); //确定兼容性后，利用鼠标移动坐标的函数来取得横纵坐标
for (var i = div.length - 1; i > 0; i--) { //遍历DIV，从最后一个开始。
div[i].style.left = div[i - 1].offsetLeft + 'px'; //将前一个的offsetLeft给后一个
div[i].style.top = div[i - 1].offsetTop + 'px'; //将前一个的offsetTop给后一个
}
div[0].style.left = pos.x + 'px'; //将鼠标的横坐标给第一个
div[0].style.top = pos.y + 'px'; //将鼠标的纵坐标给第一个
}
function GetMouse(ev) { //获取鼠标移动的坐标
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
return { x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop }
}
</script>