zoukankan      html  css  js  c++  java
  • jquery实现文字上下无缝滚动

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        .nl {
            height: 30px;
            margin: 0;
            overflow: hidden;
            padding: 0 0 0 16px;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 200px;
        }
    
        .nl div {
            font-size: 24px;
            height: 30px;
            line-height: 30px;
        }
        </style>
    </head>
    
    <body>
        <div id="n1" class="nl">
            <div>是不是不一样的啊</div>
            <div>这里的文字发的</div>
            <div>very ggod</div>
        </div>
        <script type="text/javascript">
        var vMarq = function(id, tag, heigh, speed, delay) {
            var me = this;
            me.EL = document.getElementById(id);
            me.PA = 0;
            me.TI = null;
            me.LH = heigh;
            me.SP = speed;
            me.DY = delay;
            me.exec = function() {
                if (me.PA) return;
                me.EL.scrollTop += 2;
                if (me.EL.scrollTop % me.LH <= 1) {
                    clearInterval(me.TI);
                    me.EL.appendChild(me.EL.getElementsByTagName(tag)[0]);
                    me.EL.scrollTop = 0;
                    setTimeout(me.start, me.DY * 1000);
                }
            };
            me.start = function() {
                if (me.EL.scrollHeight - me.EL.offsetHeight >= me.LH) me.TI = setInterval(me.exec, me.SP);
            };
            me.EL.onmouseover = function() { me.PA = 1 };
            me.EL.onmouseout = function() { me.PA = 0 };
            setTimeout(me.start, me.DY * 1000);
        };
    
        new vMarq("n1", "div", 30, 80, 1.5);
        </script>
    </body>
    
    </html>
  • 相关阅读:
    Ubuntu中pip的疑难杂症
    Python 分类方法记录
    Python 绘制热图
    脚本学习
    Ubuntu 基础使用教程
    机器学习各种相似性度量及Python实现
    Ubuntu 16.04安装R及Rstudio
    机器学习和数据挖掘领域大牛
    vux+vue-cli3.0坑
    函数的抖动以及节流
  • 原文地址:https://www.cnblogs.com/chenmiaosong/p/7760370.html
Copyright © 2011-2022 走看看