`

html鼠标跟随

html鼠标跟随 
阅读更多

*、学习写了一个能够实现鼠标跟随的小demo，其中还有速度的控制以及超出页面后的处理哦~

      详见源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>DIV跟我来</title>
	<style>
		div{
			width:30px;
			height:30px;
			position:absolute;
			background:green;
		}
		#divshow{
			width:100px;
			height:100px;
			left:700px;
			top:0px;			
			position:absolute;
		}
	</style>
	<script>
		window.onload = function() {	
			
			var divshow = document.getElementById("divshow");
			var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
			divshow.innerHTML = "X:"+scrollTop +'px'+"<br/>Y:"+scrollLeft+'px';
			var divs = document.getElementsByTagName("div");
			var i = 0;
			document.onmousemove = function(ev) {
			
				var oEvent = ev ||window.event;
				for(i = divs.length - 1; i > 0 ; i--) {
					//alert(i+"---top:"+divs[i-1].style.top+";-----left:"+divs[i-1].style.left);
					divs[i].style.left = (divs[i-1].style.left);
					divs[i].style.top = (divs[i-1].style.top);				
				}
				
				divs[0].style.left = oEvent.clientX+'px';
				divs[0].style.top = oEvent.clientY+'px';
				//alert(i+"---top:"+divs[0].style.top+";-----left:"+divs[0].style.left);
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
				divshow.innerHTML = "X:"+(oEvent.clientX+scrollLeft) +'px'+"<br/>Y:"+(oEvent.clientY+scrollTop)+'px'; ;
			}
		}
	</script>	
</head>
<body>
<label id="divshow"></label>
<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>

     附件有更多好玩的哦~

分享到：
| jsp之image操作
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics