jquery模拟marquee滚动

  jquery模拟marquee滚动效果,可以设置滚动完毕后间隔多少秒再重新滚动。如果是只需要兼容IE浏览器,marquee有个onfinish事件(需要指定loop或者behavior为behavior="slide"才会触发onfinish事件),可以使用此事件结合setTimeout重启marquee。测试firefox不支持marquee的stop和start方法,所以要兼容firefox使用js控制效果最佳。

  jquery模拟marquee滚动源代码如下

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<style>div.marquee{overflow:hidden;background:#ccc;width:400px;height:140px;line-height:30px}</style>
<script>var s = '<div class="marquee">'; for (var i = 0; i < 10; i++) s += i + '该系统于2017-06-21进行维护,望相互告知!!!<br />'; s += '</div>';document.write(s)</script><br />
<div class="marquee">该系统于2017-06-21进行维护,望相互告知!!!</div>
<script>
    //@div:滚动容器
    //@step:每次滚动的高度,默认1px
    //@delay:滚动间隔,默认0.05s
    //@nextDelay:滚动完毕间隔多少秒再次滚动,默认2s后启动
    function myMarquee(div, step, delay,nextDelay) {
        step = step || 1;
        delay =( delay || 0.05)*1000;
        nextDelay = (nextDelay || 2) * 1000;;
        var viewHeight = div.offsetHeight, timer, scrollTop = 0, totalHeight = viewHeight + div.scrollHeight,waitForNext=false;
        //前后补充容器高度一样的空白
        div.innerHTML = '<div style="height:' + viewHeight + '"></div>' + div.innerHTML + '<div style="height:' + viewHeight + '"></div>';
        function scroll() {
            scrollTop += step;
            div.scrollTop = scrollTop;
            if (scrollTop >= totalHeight) {
                clearInterval(timer);
                waitForNext = true;
                scrollTop = div.scrollTop = 0;
                setTimeout(function () { waitForNext = false; startTimer() }, nextDelay);
            }
        }
        function startTimer() { if (!waitForNext) timer = setInterval(scroll, delay); }
        $(div).hover(function () { clearInterval(timer) }, startTimer);
        startTimer()
    }
    $('div.marquee').each(function () {
        if (this.scrollHeight > this.offsetHeight) new myMarquee(this);
    });
</script>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:jquery模拟marquee滚动

评论(0)Web开发网
阅读(1890)喜欢(0)JavaScript/Ajax开发技巧