标签：img 指定 imgLeft delta var img1 移动 图片
图片在指定范围内移动
图片在指定范围内移动，配上合适和图片和背景，就可以完成好看的动态页面。
其实就是一张猫行走的动图，再配上黄色的背景色。
<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);
}
首先声明好所需的变量，在这里我以页面的宽度为边界，而offsetLeft则是返回元素的水平偏移位置。
一开始imgLeft值为0，然后随着setTimeout方法的调用，图片开始往右移动5px，然后更新imgleft的值，再次调用方法，图片的left += 5px。
当图片移动到最右边时，使移动距离变号，变成-5，这个时候就变成了left -= 5，图片开始从右往左移动，然后利用权重，将图片显示到上方。
标签：img,指定,imgLeft,delta,var,img1,移动,图片 来源： https://blog.csdn.net/weixin_44538399/article/details/87893181
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。