JS简单浮动碰撞效果

创建时间：2014-11-30 投稿人：浏览次数：1674

<html>
<head>
<title>小太阳碰撞效果</title>
<script language="javascript">
<!--
		directX=1;  //X轴方向
		directY=1;  //Y轴方向
		sunX=0;
		sunY=0;
		
	function sunMov(){
		//定两个方向
		sunX+=directX*2;
		sunY+=directY*2;

		//修改div的left top
		sundiv.style.top=sunY+"px";
		sundiv.style.left=sunX+"px";

		//判断什么时候，转变方向
		//x方向(offestWidth可以返回，当前这个对象的实际宽度)
		if(sunX+sundiv.offsetWidth>=document.body.clientWidth || sunX<=0){
			directX=-directX;
		}
		if(sunY+sundiv.offsetHeight>=document.body.clientHeight || sunY<=0){
			directY=-directY;
		}
	}

	setInterval("sunMov()",10);

//-->
</script>
</head>
<body style="background-image:URL("a.jpg");background-size:cover; background-repeat:no-repeat">
<div id="sundiv" style="position:absolute">
<img src="sun.png"/>
</div>
</body>
</html>

声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。