js实现简单小实例（奔跑的小猪）

最新推荐文章于 2021-07-07 20:18:55 发布

原创最新推荐文章于 2021-07-07 20:18:55 发布 · 1k 阅读

8 ·

CC 4.0 BY-SA版权

js小实例专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的图像自动左右移动的案例。通过获取窗口宽度和图像位置，结合定时器，使图像在浏览器窗口内自动左右移动，达到动态效果。此案例涉及HTML、CSS样式设置及JavaScript编程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>window对象</title>
		<style>
			#img{
				width: 300px;
				height: 300px;
				position: absolute;
				left: 0px;
				top: 50%;
			}
			
		</style>
		<script>
			var w ;//页面的宽度
			var img;//图像对象
			var imgLeft;//图像左边的位置
			var imgWidth; //图像 的宽度
			var delta =5 ;//每次移动的距离
			var delay =10;//时间
			window.onload = function(){
				
				w = window.innerWidth;
				img = document.getElementById("img");
				imgLeft = img.offsetLeft;
				imgWidth = img.width;
				//调用move（）方法
				move();
			};
			function move(){
				//判断图像是否越界（超出页面的宽度）
				if(imgLeft<0||imgLeft+imgWidth>w){
					delta=-delta;//变号
				}
				img.style.left = imgLeft+delta+"px";
				//移动位置后需要重新修改左边的位置
				imgLeft = img.offsetLeft;
				//重复不断调用函数
				setTimeout(move,delay);
			}		
		</script>
	</head>
	<body>
	   
		<img src="img/img.jpg" id="img" /> <!--图片在-->
	</body>
</html>