js无缝滚动文字

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>

参考资料 js元素的属性和方法http://www.runoob.com/jsref/dom-obj-all.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值