牛骨文教育服务平台(让学习变的简单)
博文笔记

JS简单浮动碰撞效果

创建时间:2014-11-30 投稿人: 浏览次数:2064
<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>


声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。