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>
  • 相关阅读:
    leetcode[45]Jump Game II
    leetcode[46]Permutations
    leetcode[47]Permutations II
    leetcode[48]Rotate Image
    手把手一起玩perl安装
    List the Modules in Your System
    oracle之recyclebin
    10g 11g新特性
    RMAN相关操作命令
    手把手一起安装RAC+DataGuard
  • 原文地址:https://www.cnblogs.com/gechen/p/12068593.html
Copyright © 2011-2022 走看看