javascript 鼠标跟随特效代码及理解

时间：2017-09-11 18:27:27 阅读：233 评论：0 收藏：0 [点我收藏+]

	javascript 鼠标跟随特效 <!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	*{
	margin: 0;
	padding: 0;
	}
	body{
	height: 1000px;
	}
	div{
	width: 50px;
	height: 50px;

	background: red;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	line-height: 50px;

	}
	</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>
	<script>
	var oDiv=document.getElementsByTagName(‘div‘);
	document.onmousemove=function(e){
	//e等于鼠标对象
	e=e \|\| window.event;
	var maxX=window.innerWidth-oDiv[0].offsetWidth-18;
	var maxY=window.innerHeight-oDiv[0].offsetHeight-18; //浏览器的宽度 - 第0个盒子 - 滚动条的宽度
	var sjyr=Math.floor(Math.random()*255);
	var sjyg=Math.floor(Math.random()*255);
	var sjyb=Math.floor(Math.random()*255);
	var scrollTop=document.documentElement.scrollTop \|\| document.body.scrollTop;
	if(e.clientX>maxX){
	oDiv[0].style.left=maxX+‘px‘;
	}else{
	oDiv[0].style.left= e.clientX+‘px‘;
	}
	if(e.clientY>maxY){
	oDiv[0].style.top=maxY+‘px‘;
	}else{
	oDiv[0].style.top= e.clientY+scrollTop+‘px‘;
	}
	for(var i=oDiv.length-1;i>0;i--){ //for循环让div跟随他的上一个
	oDiv[i].style.left = oDiv[i-1].style.left;
	oDiv[i].style.top = oDiv[i-1].style.top;
	oDiv[i].style[‘backgroundColor‘] = oDiv[i-1].style[‘backgroundColor‘];


	}//后者跟随前面的一个DIV
	//滚动条滚动的距离;

	oDiv[0].style.backgroundColor=‘rgb(‘+sjyr+","+sjyg+","+sjyb+‘)‘;



	/* oDiv[0].style.left= e.clientX+‘px‘;
	oDiv[0].style.top= e.clientY+scrollTop+‘px‘;*/
	//e.clientX 鼠标 X 距浏览器边缘多少像素
	//e.clientY 鼠标 Y 距浏览器边缘多少像素
	}
	</script>
	</body>
	</html> 下面有图片：

标签：javascript 鼠标跟随特效代码及理解

原文地址：http://827403645.blog.51cto.com/11177953/1964314

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行