jQ模擬逐幀動畫動畫
阿新 • • 發佈：2019-02-07
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;list-style:none;} .div1{margin:100px auto;width:242px;height:137px;background:url(bao.png) 0 0;} .div2{margin:100px auto;width:242px;height:137px;background:url(bao.png) -242px 0px;} .div3{margin:100px auto;width:242px;height:137px;background:url(bao.png) -484px 0px;} .div4{margin:100px auto;width:242px;height:137px;background:url(bao.png) -726px 0px;} .div5{margin:100px auto;width:242px;height:137px;background:url(bao.png) 0px -137px;} .div6{margin:100px auto;width:242px;height:137px;background:url(bao.png) -242px -137px;} .div7{margin:100px auto;width:242px;height:137px;background:url(bao.png) -484px -137px;} .div8{margin:100px auto;width:242px;height:137px;background:url(bao.png) -726px -137px;} </style> <script src="jquery-1.7.2.js" type="text/javascript"></script> <script> $(function(){ var timer = null; var num = 1; timer = setInterval(function(){ num++; if (num==8) { num=1; } $("#div1").removeClass().addClass('div'+num); },200) }) </script> </head> <body> <div id="div1"></div> </body> </html>