[jQ模拟逐帧动画动画 - xyphf的博客 - CSDN博客]

<!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>

Original url: Access

Created at: 2018-10-10 19:07:45

Category: default

Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论