用简单的代码让一组静态图片变成gif动画

2024-04-27 15:14:20

字体：大中小

来源：转载

供稿：网友

比如这组图片：

变成这样的gif动画：

是不是很神奇。。。。先看html 、样式。很简单，一个div，然后引入图片。

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title>动态效果</title>		<style type="text/CSS">			.anim{				width :200px;				height : 300px;				background:url(animl1.jpg) ;				background-position : 0px 0px;			}			</style>	</head>	<body>		<div class="wrapper">						<div class="anim"></div>					</div>			 </body></html>再看js：var anim = document.querySelector(".anim");var left = 0;setInterval(function(){	left +=200;	if(left==1600){		left = 0;	}anim.style.backgroundPosition = -left+"px 0px";},100);这就OK了！ 原理在于background-position（背景图像的起始位置）设置200px的宽度主要是因为这组每一部分宽度为200px，根据background-position的作用，在定义left的偏移量。为什么最后left前面要加上-呢？这组图片是递进关系，随着往右的偏移，背景图片在向左递减。比如background-position：200px 0px；它是以容器的左上角为参考，向左偏移200px，也就成为这样：第一幅图就向左偏移200px，消失在显示范围内了。然后当它为-1600px时，到达最后一幅图，把left设置0，又重新开始。再根据setInterval()方法，无限循环，就得到了gif动态效果。

上一篇：深入理解javascript原型和闭包（2）——函数和对象的关系

下一篇：24.缩略图与警告框