美文网首页
文字滚动

文字滚动

作者: _孙小胖 | 来源:发表于2018-12-27 17:05 被阅读0次
<div class="searchLeft Flex"  style="display:flex;">
    <span style="display:inline-block;margin:0 10px;color:red;">大家都在找:</span>
    <div id="s" style="width:500px; position:relative; white-space:nowrap; overflow:hidden; height:45px;">
        <div id="noticeList" style="position:absolute; top:0; height:45px;">
            <span>孙小胖文字横向滚动</span>
            <span>孙小胖文字横向滚动</span>
            <span>孙小胖文字横向滚动</span>
        </div>
    </div>
</div>

<script>
    $(function(){
          $.fn.textScroll=function(){
        var p = $(this),
            c = p.children(),
            speed=1000;// 值越大,速度越小
        var cw = c.width(),pw=p.width();
        var t = (cw / 100) * speed;
        var f = null, t1 = 0;
        function ani(tm) {
            counttime();
            c.animate({ left: -cw }, tm, "linear", function () {
                c.css({ left: pw });
                clearInterval(f);
                t1 = 0;
                t=((cw+pw)/100)*speed;
                ani(t);
            });
        }
        function counttime() {
            f = setInterval(function () {
                t1 += 10;
            }, 10);
        }
        p.on({
            mouseenter: function () {
                c.stop(false, false);
                clearInterval(f);
                console.log(t1);
            },
            mouseleave: function () {
                ani(t - t1);
                console.log(t1);
            }
        });
        ani(t);
    }
    $("#s").textScroll();
    })
</script>
<div align="center"id="demo"style="overflow:hidden;height:20px;width:600px;border:1px solid #000;">
    <div id="demo1">
        孙小胖文字竖向滚动
    </div>
    <div id="demo2"></div>
</div>

<script>
    var demo = $("#demo")[0];
    var demo1 = $("#demo1")[0];
    var demo2 = $("#demo2")[0];
    var speed = 100;    //滚动速度值,值越大速度越慢
    var nnn = 200 / demo1.offsetHeight;
    for (i = 0; i < nnn; i++) {
        demo1.innerHTML += "<br />" + demo1.innerHTML
    }
    // demo2.innerHTML = demo1.innerHTML    //克隆demo2为demo1
    function Marquee() {
        if (demo2.offsetTop - demo.scrollTop <= 0)    //当滚动至demo1与demo2交界时
            demo.scrollTop -= demo1.offsetHeight    //demo跳到最顶端
        else {
            demo.scrollTop++
        }
    }

    var MyMar = setInterval(Marquee, speed);        //设置定时器
    demo.onmouseover = function () {
        clearInterval(MyMar)
    }    //鼠标经过时清除定时器达到滚动停止的目的
    demo.onmouseout = function () {
        MyMar = setInterval(Marquee, speed)
    }    //鼠标移开时重设定时器
</script>

相关文章

网友评论

      本文标题:文字滚动

      本文链接:https://www.haomeiwen.com/subject/epcdlqtx.html