您的位置: 首页  >  IT文章  >  js特效从左飞到右 仿腾讯新闻页 庆祝抗战得胜70周年

js特效从左飞到右 仿腾讯新闻页 庆祝抗战得胜70周年

分类: IT文章 • 2024-12-09 09:53:55
js特效从左飞到右 仿腾讯新闻页 庆祝抗战胜利70周年

庆祝抗战胜利70周年

tips:

  • 使用setinterval()和clearinterval()来实现
  • 战斗机速度要快于直升机
  • 在合适位置使用clearinterval()清除战斗机定时器，防止“套圈”直升机，并在合适位置重新启动战斗机定时器

html代码片段

<body>
<div class="main">
    <img src="plane1.png" id="zhishengji">
    <img src="plane4.png" id="zhandouji">
</div>
</body>

javascript代码片段

<script type="text/javascript">
    var offset = -600;

    function zsj(){
        $("#zhishengji").css("left",offset+"px");
        var appendix = offset%3;
        //实现螺旋桨旋转效果
        switch (appendix) {
        case 0:
        $("#zhishengji").attr("src","plane"+1+".png");
            break;
        case 1:
            $("#zhishengji").attr("src","plane"+2+".png");
                break;
        case 2:
            $("#zhishengji").attr("src","plane"+3+".png");
                break;
        default:
            $("#zhishengji").attr("src","plane"+3+".png");
            break;
        }

        if(offset<2000){
            offset=offset+10;
        }else{
            offset=-600;
            //重新启动战斗机计时器
            t2 = setInterval("zdj()",10);
        }
    }
    var t1 = setInterval("zsj()",30);

    var zdjoffset = -500;
    function zdj(){
        $("#zhandouji").css("left",zdjoffset+"px");

        if(zdjoffset<6000){
            zdjoffset=zdjoffset+10;
        }else{
            zdjoffset=-500;
            //飞出屏幕后清除计时器
            clearInterval(t2);
        }
    }
    var t2 = setInterval("zdj()",10);
</script>

补充

这里只是简单写了个Demo，如果放到实际项目中使用，由于屏幕分辨率不同，需要根据屏幕宽度动态修改offset上限值，这里为了简单，用了固定值2000

源码下载

http://download.****.net/detail/jasper_success/9053331

版权声明：本文为博主原创文章，未经博主允许不得转载。

相关推荐