jq跑马灯

最新推荐文章于 2024-08-08 07:50:59 发布

weixin_45162984

最新推荐文章于 2024-08-08 07:50:59 发布

阅读量152

点赞数

分类专栏：前端js 文章标签： jquery javascript html

本文链接：https://blog.csdn.net/weixin_45162984/article/details/109494912

版权

前端js 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

html块


            <div class="hdle">
                <div id="line">
                        <div class="item">
                            <a href="" style="width: 100%;" target="_blank" class="txt" >******</a>
                        </div>
                </div>
                <div id="line2"></div>
            </div>

js块

$(function () {
            var demo = $(".hdle")[0];
            var demo1 = $("#line")[0];
            var demo2 = $("#line2")[0];
            var speed = 50;    //滚动速度值，值越大速度越慢
            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)
            }    //鼠标移开时重设定时器
            popupAdvertising()
        });