ovsexia 2016-10-26 12:19 采纳率: 80%
浏览 1018
已采纳

想用jq做一个抽烟机不断把下面的烟雾连续不断往上抽的效果

想做一个抽烟机不断把下面的烟雾连续不断往上抽的效果，自己写了一下发现总会卡一下不知道为什么总会一卡一卡的往上走，不是连续的往上走，jq版本是jquery-1.10.1.min.js

<style>
.ipro_pic {width:308px; height:242px; position:relative;}
.ipro_pic .h1 img {width:308px; height:242px;}
.ipro_pic .h2 {width:308px; height:88px; overflow:hidden; position:absolute; bottom:0; left:0;}
.ipro_pic .h2 img {position:absolute; top:0px; left:-50px;}
</style>

<div class="ipro_pic">
  <div class="h1"><img src="images/cate1.jpg" /></div>
  <div class="h2"><img src="images/yanwu.png" /></div>
</div>


<script>
function yanwu()
{
    var div = $('.ipro_pic .h2 img');
    if(div.css("top")=="-284px")
    {
        div.css("top","0px");
        yanwu();
    }
    else
    {
        div.animate({top:'-284px'},1000,yanwu);
    }
}
yanwu();
</script>

附上图片：
图片说明

烟雾
图片说明

  • 写回答

4条回答 默认 最新

  • csmzl 2017-01-06 02:54
    关注

    在做广告无缝轮播广告无缝轮播的时候，顺便修正了下你的代码，现在可以无缝抽油烟了：

     <html>
<head>
    <meta charset="utf-8"></media>
    <script type="text/javascript" src="../js/jquery-1.12.1.js"></script>
<style>
.ipro_pic {width:308px; height:242px; position:relative;}
.ipro_pic .h1 img {width:308px; height:242px;}
.ipro_pic .h2 {width:308px; height:88px; overflow:hidden; position:absolute; bottom:0; left:0;}
.ipro_pic .h2 img {position:relative; top:0px; left:-50px;}
</style>

</head>
<body align="center">
    <div class="ipro_pic">
        <div class="h1"><img src="../img/cate1.jpg" /></div>
        <div class="h2">
            <ul id="ulID" style="list-style-type:none;position: relative;top: -16px;">
                <li><img src="../img/yanwu.png" id="img1"/></li>
                <li><img src="../img/yanwu.png" id="img2"/></li>
                <!-- <li><img src="yanwuHead.png" id="img3"/></li> -->
            </ul>
        </div>
    </div>

<script type="text/javascript">  

    var PlaceTop = parseInt($("#ulID").css("top"));
    function yanwu()
    {
        var ulID = $("#ulID");
        PlaceTop = --PlaceTop;
         if(PlaceTop ==-571)
        {
            PlaceTop=0;
        }
        if(PlaceTop < -571){
            alert("Eror!");
            clearInterval(int);
        }
        ulID.css("top",PlaceTop);   
    }
    int=setInterval("yanwu()",1);
</script>                       
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

悬赏问题

  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码