js运动基础_完善版

最新推荐文章于 2018-11-21 09:24:49 发布

烧了回忆取暖

最新推荐文章于 2018-11-21 09:24:49 发布

阅读量367

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/kanuoyuan/article/details/24353361

版权

js 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js运动基础</title>
<style>
#div1{ width:200px; height:200px; background:yellow; position:absolute; top:50px; left:0;}
</style>
<script>
var timer=null;
function startMove()
{
	var oDiv=document.getElementById('div1');
	
	clearInterval(timer);  //关闭之前开的定时器，防止定时器叠加速度逐渐变快，（如果没有关闭，在多次点击开始运动按钮，等同于同时开了多个定时器）
	
	timer=setInterval(function ()
	{
		var speed=7;  //当speed为 7,8,9....时运动到300处时，并不会停止，而是跳过继续运动
		
		//if(oDiv.offsetLeft==300)
		if(oDiv.offsetLeft>=300)
		{
			clearInterval(timer);
		}
		else
		{
		    oDiv.style.left=oDiv.offsetLeft+speed+'px';
		}
	},30);
}
</script>
</head>

<body>
<input type="button" id="btn" value="开始运动" οnclick="startMove()" />
<div id="div1"></div>
</body>
</html>

此次内容比较适合做运动导航，能够让网页显得更加美观，根据个人的设计让网页看起来更加新颖