12004 Js动画实例,飞翔的小鸟,源代码 – 恵玩科技

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload=init;//init不能加括号
			function init(){
				//让鸟出现在窗口的最右边
				//得到图片
				var pic=document.getElementById("niao");
				
				//得到用户窗口的宽度-图片的宽度
				var web_Width=document.body.clientWidth;
				var pic_Width= pic.width;
				pos=web_Width-pic_Width;
				//设置鸟儿的位置
				//alert(pos);
				//必须先设置鸟儿的定位为绝对定位
				pic.style.position="absolute";
				
				pic.style.left=pos+"px";
				
				//设置动画
				var tm1=window.setInterval("fly()",100);
			}
			var pos=0;//这里定义的居然能够被前面的函数调用
			function fly(){
				var pic=document.getElementById("niao");
				if(pos<=0){
					return;
				}
				pos-=10;
				pic.style.left=pos+"px";
			}
			
			
			
		</script>
	</head>
	<body>
		<img src="images/flyingBird.GIF" id="niao"/>
		
	</body>
</html>

 

打赏作者