您的位置：首页 > 其它

一串div跟着鼠标移动

2016-07-13 08:56 260 查看

<!DOCTYPE html>
<html>

<head>
<meta
charset="UTF-8">
<title></title>
<style
type="text/css">
div
{
width:
10px;
height:
10px;
background-color: lawngreen;
border-radius:
50%;
position:
absolute;
}
</style>
</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>
<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>
<div></div>
<div></div>
<div></div>
<div></div>
<script
type="text/javascript">
var
divs = document.getElementsByTagName("div");
// 一串跟着动，核心是onmousemove
document.onmousemove
= function() {
// 先取得第一个div的left和top值，根据鼠标的坐标来确定
divs[0].style.left
= event.clientX
+ "px";
divs[0].style.top
= event.clientY
+ "px";
for
(var i = divs.length
- 1; i > 0; i--) {
divs[i].style.left
= divs[i - 1].style.left;
divs[i].style.top
= divs[i - 1].style.top;
}
document.onmouseup
= function(){
document.onmousemove
= null;
}
}
</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 拖拽移动鼠标

相关文章推荐

新的分享

章节导航