jquery实现跑马灯效果

最新推荐文章于 2022-06-26 22:50:24 发布

@SIMIN

最新推荐文章于 2022-06-26 22:50:24 发布

阅读量522

点赞数

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/SIMIN_1617/article/details/106335629

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script language="javascript" type="text/javascript">
    $(function () {
      var demo = $("#demo")[0];
      var demo1 = $("#demo1")[0];
      var demo2 = $("#demo2")[0];
      var speed = 10;    //滚动速度值，值越大速度越慢
      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>
</head>

<body>
  <div align="center" id="demo" style="overflow:hidden;height:200px;width:600px;border:1px solid #000;">
    <div id="demo1">
      HTML5！
    </div>
    <div id="demo2"></div>
  </div>
</body>

</html>

@SIMIN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现跑马灯效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script language="javascript" t.
复制链接

扫一扫

专栏目录