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>
  • 相关阅读:
    gitlab搭建
    java数组
    安裝nextcloud
    Spring的定时任务@Scheduled(cron = "0 0 1 * * *")
    java内存结构(下)
    java内存结构(上)
    多线程的三个特性
    @RequestBody用法
    SwaggerAPI注解详解(转载)
    在jpanel中添加jbutton并自由设置按钮大小和位置
  • 原文地址:https://www.cnblogs.com/gechen/p/12068593.html
Copyright © 2011-2022 走看看