js实现图片移动_js移动图片-CSDN博客

本文链接：https://blog.csdn.net/weixin_44538399/article/details/87893181

本文介绍如何使用JavaScript实现图片在指定范围内移动，结合动态图和背景色，创建动态页面。通过调整元素的水平偏移位置，使图片在达到边界时反转方向，实现左右循环移动的效果。

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

图片在指定范围内移动

图片在指定范围内移动，配上合适和图片和背景，就可以完成好看的动态页面。

在这里插入图片描述
其实就是一张猫行走的动图，再配上黄色的背景色。

<body style="background-color:rgba(255,216,0,1.00)">  //背景颜色
	<img src="image/cat1.gif" id="img1">  //动态图片
    <img src="image/cat.gif" id="img">  //动态图片
</body>

将动态图镜像反转可以使用GIF Movie Gear这款软件，打开文件后，动画－旋转－水平翻转
准备好所需的素材，接下来开始写方法。

var w ;//页面的宽度
			var img;//图像对象
			var img1;//图像对象
			var imgLeft;//图像左边的位置
			var imgWidth; //图像 的宽度
			var delta =5 ;//每次移动的距离
			var delay =30;//时间

			window.onload = function(){
				w = window.innerWidth;
				img = document.getElementById("img");
				img1 = document.getElementById("img1");
				imgLeft = img.offsetLeft;
				imgWidth = img.width;
				move();
			};
			function move(){
				//判断图像是否越界（超出页面的宽度）这里我以整个页面宽度为边界
				if(imgLeft<0||imgLeft+imgWidth>w){
					delta=-delta;//变号
				}
				img.style.left = imgLeft+delta+"px";
				img1.style.left = imgLeft+delta+"px";
				if(delta==-5){
					$("#img1").css("z-index","100")//通过权重来显示或者隐藏图片
				}else{
					$("#img1").css("z-index","0")
				}
				
				//移动位置后需要重新修改左边的位置
				imgLeft = img.offsetLeft;
				//重复不断调用函数
				setTimeout(move,delay);
			}