JavaScript：鼠标后面跟踪一串小圆圈、如贪吃蛇一般的效果

 利用的知识点：position-absolute / onmousemove / left / top / offsetLeft / offsetTop

<!DOCTYPE html>
<html>
<head>
	<title>学习事件</title>
<style type="text/css">
	div{
		height: 5px;
		width: 5px;
		background-color: green;
		position: absolute;
	}
</style>
<script type="text/javascript">
window.onload = function(){

	document.onmousemove = function(){
		var aDiv = document.getElementsByTagName('div');
		for (var i = aDiv.length - 1; i > 0; i--) {
			aDiv[i].style.left = aDiv[i-1].offsetLeft+'px';
			aDiv[i].style.top = aDiv[i-1].offsetTop+'px';
		}
		aDiv[0].style.left = event.clientX+'px';
		aDiv[0].style.top = event.clientY+'px';
	}
};
</script>
</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>
</body>
</html>

效果如下：

posted @ 2020-02-16 22:41  昨夜昙花  阅读(15)  评论(0)    收藏  举报