變成這樣的gif動(dòng)畫(huà)：
是不是很神奇。。。。先看html 、樣式。很簡(jiǎn)單，一個(gè)div，然后引入圖片。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>動(dòng)態(tài)效果</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（背景圖像的起始位置）設(shè)置200px的寬度主要是因?yàn)檫@組每一部分寬度為200px，根據(jù)background-position的作用，在定義left的偏移量。為什么最后left前面要加上-呢？這組圖片是遞進(jìn)關(guān)系，隨著往右的偏移，背景圖片在向左遞減。比如background-position：200px 0px；它是以容器的左上角為參考，向左偏移200px，也就成為這樣：![]()
![]()
![]()
第一幅圖就向左偏移200px，消失在顯示范圍內(nèi)了。然后當(dāng)它為-1600px時(shí)，到達(dá)最后一幅圖，把left設(shè)置0，又重新開(kāi)始。再根據(jù)setInterval()方法，無(wú)限循環(huán)，就得到了gif動(dòng)態(tài)效果。
新聞熱點(diǎn)
疑難解答
圖片精選
