用javascript使图片左右移动

javascript小例子,每点击一次按钮使图片反方向运动

代码详情:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>
<style type="text/css">
	#img{
		position:absolute;
		top:50px;
	}
</style>
<script>
	window.onload=function(){
		var oBtn=document.getElementById("btn");
		var oBtn2=document.getElementById("btn2");
		var oImg=document.getElementById("img");
		var speed=-5;//定义运动速度
		var flag=1;//用于判断运动方向
		var timer;//定时器变量
		
		//点击运动事件函数
		oBtn.onclick=function(){
			if(flag==1){
				clearInterval(timer);//先消除定时器
				speed=speed*-1;//用于改变运动方向
				flag=2;//改变运动方向的判断条件
				timer=setInterval(funDS,50);//设置定时器使图片运动
			}
			else if(flag==2){
				clearInterval(timer);//先消除定时器
				speed=speed*-1;//用于改变运动方向
				flag=1;//改变运动方向的判断条件
				timer=setInterval(funDS,50);//设置定时器使图片运动
			}
		}
		
		//定时器函数
		function funDS(){
			var oldLeft=oImg.style.left;//获取图片初始左边偏移量
			var newLeft=parseInt(oldLeft)+speed;//获取图片运动后的左边偏移量
			oImg.style.left=newLeft+"px";
		}
		
		//点击停止运动函数
		oBtn2.onclick=function(){
			clearInterval(timer);
		}
	}
</script>
	
</head>

<body>
	
	<input id="btn" type="button" value="再次点击改变方向" /> <input id="btn2" type="button" value="停止" />
    <img id="img" src="http://www.heartmv.com/wp/wp-content/uploads/2019/04/you2yong3.gif" style="left:30px;" />
<-- 注意:这个行内属性不能省略: style="left:30px;" -->
	
</body>
</html>

看完该文章有什么感受?

发表评论

电子邮件地址不会被公开。

标签:
顶部