使用js时间周期做动画

最新推荐文章于 2023-03-08 19:50:13 发布

lianggexiao666

最新推荐文章于 2023-03-08 19:50:13 发布

阅读量405

点赞数 1

分类专栏：网络文章标签：使用js时间周期做动画

网络专栏收录该内容

24 篇文章 0 订阅

订阅专栏

使用js时间周期做动画

	<style type="text/css">
		#mdiv{ width: 1200px; border:solid 1px #f00; height: 400px; margin-top: 100px; position: relative;}
		#mm{ width: 100px; height: 100px; background: #AA0000; border-radius: 50%; position: absolute;left:0;top: 150px;}
		</style>
</head>
<script type="text/javascript">
	window.function(){
		var bt=document.getElementById("bt");
		var sbt=document.getElementById("sbt")
		var mm=document.getElementById("mm");
		bt.onclick=function(){
			var v=10;//设置小球每次运动的距离
			var dong=setInterval(function(){
				var left=mm.offsetLeft;//获取小球距离左边界的距离
				if(left>1100||left<0){
					v=-v;
				}
				mm.style.left=left+v+"px"
			},20)
			sbt.onclick=function(){
				clearInterval(dong);
			}
		}		
	}
</script>
<body>
	<div id="mdiv">
		<div id="mm"></div>
	</div>
	<button id="bt">开始动</button>
	<button id="sbt">停止动</button>
</body>