javascript滑动停顿效果

最新推荐文章于 2024-09-29 09:32:38 发布

luoage_

最新推荐文章于 2024-09-29 09:32:38 发布

阅读量613

点赞数

CC 4.0 BY-SA版权

分类专栏： javaScript

本文链接：https://blog.youkuaiyun.com/j864458340/article/details/78435160

javaScript 专栏收录该内容

14 篇文章

订阅专栏

突然发现好久没来了,这些天忙着工作,悲催 !!

一个小的JS滑顿效果,虽然功能很小,在刚看到这个功能的时候我还是费了一上午,汗呐...!! javascript滑动停顿效果

下面开始附代码:

<html>
    <head>
        <title>滑顿效果</title>
        <script src="jquery.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="cuxiao_huodong">
            <div class="img_3"></div>
            <dl class="cuxiao_huodong_wz" id="cxhd_0" style="height:18px;overflow:hidden;">
                <dd><a target="_blank" href="http://jc/goods-3916.html">国宝熊猫币画双绝12</a></dd>
                <dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币1</a></dd>
                <dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币2</a></dd>
                <dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币3</a></dd>
                <dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币4</a></dd>
                <dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币5</a></dd>
                <dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币6</a></dd>
                <dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币7</a></dd>
                <dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币8</a></dd>
                <dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币9</a></dd>
                <dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币10</a></dd>
                <dd><a target="_blank" href="http://jc/goods-3960.html">2011版熊猫金银纪念币1/10盎司金币11</a></dd>
                <dd><a target="_blank" href="http://jc/goods-13870.html">辛亥革命百年暨孙中山先生诞辰145周年大铜章13</a></dd>
                <dd><a target="_blank" href="http://jc/goods-4166.html">盛世中华中国印青玉版14</a></dd>
                <dd><a target="_blank" href="http://jc/goods-11160.html">Y6259缅甸生肖挂件淡雅A货翡翠生肖吊坠鸡证书正品15</a></dd>
            </dl>
            <div class="img_0"></div>
        </div>
        <script type="text/javascript">
            var previous = 0;
            var link = null;
            var t = 100;//循环间隔时间
            var waitTime = 2000;//间隔时间2s
            var isScroll = true;
            var t1 = 0;
            function n(){
                if(! isScroll) return;
                var d = document.getElementByIdx_x('cxhd_0');
                if(d.scrollTop==0){//18一个A框的高度
                    t1 += t;
                    if(t1 != waitTime) return; else t1=0;
                }
                previous = d.scrollTop;
                d.scrollTop+=18;
                if(d.scrollTop == previous) d.scrollTop = 0;
            }
            setInterval('n()',t);
        </script>
    </body>
</html>

这里我把#cuxiao_huodong_wz的height设置成18了,然后每次增加18个,18个停顿一次,就造成了,文字无法漫步向上走动的效果,但是避免了,文章结束时的突然出现,小bug.

总归这段JS比在网上找到的要精简的多,很实用,我们网站首页加载加上图片就要1M左右,再加一个几十K的滑动代码,就惨了.所以不得不修改啊.正在写autocomplete.祝我成功 !!