做了一个鼠标跟随的运动 但是搞不清楚为什么for要使用反向循环 为什么正向循环不行呢？
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
window.onload=function(){
var div = document.getElementsByTagName('div');
if(div[0]){
div[0].style.background = "yellow";
div[div.length-1].style.background = "green";
}
function getPos(event){
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
return {x:event.clientX+scrollLeft,y:event.clientY+scrollTop};
}
document.onmousemove = function(event){
var event = event||window.event;
var pos = getPos(event);
for(var i=div.length-1;i>0;i--){
div[i].style.left = div[i-1].offsetLeft+'px';
div[i].style.top = div[i-1].offsetTop+'px';
}
div[0].style.top = pos.y+'px';
div[0].style.left = pos.x+'px';
}
}
</script>
<style type="text/css">
div{width: 100px;height: 100px;position: absolute;background: red;}
</style>
<body style="height:2000px;">
<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>
<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>
<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>
<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>
<div></div><div></div><div></div>
<div></div><div></div><div></div>
</body>
</html>
x兔子
echo_kinchao
相关分类