js无缝滚动文字

最新推荐文章于 2022-12-21 20:43:55 发布

菜鸟程序员也有梦想

最新推荐文章于 2022-12-21 20:43:55 发布

阅读量432

点赞数 1

文章标签： html javascript

本文链接：https://blog.csdn.net/u013977285/article/details/70236756

版权

HTML代码片段

<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #container {
                width: 300px;
                height: 200px;
                overflow: hidden;
            }

            #text {
                background-color: #4169E1;
                width: 300px;
                /*height: 200px;*//* 注意不可以设置高度，否则文字显示不全*/
                overflow: hidden;
            }
        </style>

    </head>

    <body>
        <div id="container">
            <div id="text">
                <p>我是xxx</p>
                <p>我要好好学习</p>
                <p>今年26岁</p>
                <p>没有对象</p>
                <p>没有钱</p>
                <p>没有房</p>

            </div>
        </div>
        <input type="button" value="bt" onclick="move1()" />
        <input type="text" id="in" value="" />

    </body>

</html>

JavaScript代码片段

    <script type="text/javascript">
            var h = 0;
            var t;

            function move1() {
                //原理 让元素的marginTop  偏移 超过’元素自身‘高度后 ，从0开始
                h -= 1;
                var elem = document.getElementById("text");
                //offsetHeight 是指元素内容高度
                document.getElementById("in").value = elem.offsetHeight;

                if(h < -elem.offsetHeight) {
                    h = 0;
                }
                elem.style.marginTop = h + "px";

                t = setTimeout(move1, 10);
            }

            function init() {
                var cloneEle = document.getElementById("text").cloneNode(true);
                document.getElementById("container").appendChild(cloneEle);

            }
            onload = init;
        </script>