美文网首页
文字滚动

文字滚动

作者: _孙小胖 | 来源:发表于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