zoukankan      html  css  js  c++  java
  • javascript制作滚动文字

    用javascript制作滚动文字的方法如下:

    <div id="roll" class="roll">
        11111111111111111111111
        22222222222222222222222
        33333333333333333333333
        44444444444444444444444
        55555555555555555555555
    </div>
    <script>
        /*
        *思路
        *1、首先写一个函数动态的设置节点的style
        *2、每过一段特定的时间,文字的top值减少指定的值
        *3、如果是最后一项,则恢复为最开始的状态.
        * */
        var roll = document.getElementById("roll");
        var div = roll.innerHTML;
        setcss = function (_this, css) {
            if (!_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style) {
                return;
            }
            for (var i in css) {
                _this.style[i] = css[i];
            }
            return _this;
        };
        roll.innerHTML = "<div id='rr'>" + div + "</div>";
        setcss(roll, {
            "position": "relative",
            "overflow": "hidden",
            "width": "100px",
            "height": "100px",
            "color": "red",
        })
        var timeroll = document.getElementById("rr");
        var h = timeroll.offsetHeight;
        Timeroll = function () {
            var h = timeroll.offsetHeight;
            var t = parseInt(timeroll.style.top, 10);
            var tt = h > Math.abs(t) || t >= 0 ? t - 10 : (h || 0);
            setcss(timeroll, {
                "top": tt + "px"
            });
            setTimeout(Timeroll, 200);
        };
        if (h > 100) {
            Timeroll();
            setcss(timeroll, {
                "position": "relative",
                "top": "0px",
            })
        }
    </script>
  • 相关阅读:
    poj 1562 Oil Deposits
    poj 1650 Integer Approximation
    snmp4j 编程
    ubuntu 13.04 163源(亲测可用)
    c语言中static 用法总结(转)
    Spring入门
    Hibernate入门
    Struts2入门教程
    素数距离问题
    ASCII码排序
  • 原文地址:https://www.cnblogs.com/gechen/p/12068593.html
Copyright © 2011-2022 走看看