简单连续滚动效果

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>简单连续滚动效果(bwangel原创)</title>
</head>
<body>
    <div style="overflow: hidden; height: 100px; width: 280px;" id="divMain" οnmοuseοver="stopScroll()"
        οnmοuseοut="startScroll()">
        <div id="div1">
            <li>这是第一条消息。</li>
            <li>这是第二条消息。</li>
            <li>这是第三条消息。</li>
            <li>这是第四条消息,HOHO。</li>
            <li>这是第五条消息,HAHA。</li>
            <li>这是第六条消息。</li>
            <li>这是第七条消息,HOHO。</li>
        </div>
        <div id="div2">
        </div>
    </div>

    <script type="text/javascript">
        var dh = 5; //滚动的步进距离。
        var dt = 150; //滚动的时间间隔(ms)
       
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        var divMain=document.getElementById("divMain");
        function scroll()
        {
            if (div1.scrollHeight <= divMain.clientHeight )
            {
                div2.style.display = "none";
                return;
            }
            divMain.scrollTop += dh;
            if (divMain.clientHeight + divMain.scrollTop >= divMain.scrollHeight)
            {
                divMain.scrollTop = div1.scrollHeight - divMain.clientHeight;
            }
        }
       
        div2.innerHTML = div1.innerHTML;
       
        var i = 0;
        function startScroll()
        {
            if (i == 0)
                i = setInterval("scroll()", dt);
        }
       
        function stopScroll()
        {
            clearInterval(i);
            i = 0;
        }
       
        startScroll();
    </script>

</body>
</html>

  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

bwangel

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者