JS小功能x系列6文字自动滚动

最新推荐文章于 2022-07-01 10:43:15 发布

weixin_34408624

最新推荐文章于 2022-07-01 10:43:15 发布

阅读量72

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xingkongly/p/7608341.html

版权

  <style type="text/css">
        body,
        ul,
        li {
            margin: 0px;
            padding: 0px;
        }

        #center {
            margin: 60px auto;
            width: 400px;
            height: 100px;
            background: #09c;
            color:#fff;
            overflow: auto;
        }
    
        
        #center ul li {
            list-style-type: none;
            line-height: 30px;
        }

  
    </style>


</head>

<body>
    <div id="center">
        <div id="center1">
            <ul>
                <li>11111111111111111</li>
                <li>222222222222222222</li>
                <li>3333333333333333333</li>
                <li>4444444444444444</li>
                <li>55555555555555555555</li>
                <li>66666666666666</li>
                <li>7777777777777</li>

            </ul>
        </div>
        <div id="center2">
        </div>
    </div>
    <script type="text/javascript">
        var c = document.getElementById("center");
        var c1 = document.getElementById("center1");
        var c2 = document.getElementById("center2");
        c2.innerHTML = c1.innerHTML;
        function show() {
            c.scrollTop++;
            if (c.scrollTop == c2.offsetHeight) c.scrollTop = 0; 
           
        }
        var stops = setInterval(show, 30);
        c.onmousemove = function () { clearInterval(stops); }
        c.onmouseout = function () { stops = setInterval(show, 30); }
    </script>
</body>

</html>

转载于:https://www.cnblogs.com/xingkongly/p/7608341.html

weixin_34408624

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS小功能x系列6文字自动滚动

<style type="text/css"> body, ul, li { margin: 0px; padding: 0px; } #center { margin: 60px auto; ...
复制链接

扫一扫