javascript模拟marquee跑马灯效果

最新推荐文章于 2025-06-02 19:36:18 发布

清风乐鸣

最新推荐文章于 2025-06-02 19:36:18 发布

阅读量969

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JQ 移动端开发 javascript 文章标签：跑马灯 animate marquee scrollLeft scrollTop

本文链接：https://blog.youkuaiyun.com/QTFYING/article/details/98729606

javascript 同时被 3 个专栏收录

49 篇文章

订阅专栏

移动端开发

27 篇文章

订阅专栏

25 篇文章

订阅专栏

探讨HTML中marquee标签被废弃的原因，包括其由微软创造、功能不完善及不符合HTML规范等。介绍使用CSS定位、jQuery animate和scrollLeft方法实现类似效果的三种方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

随着html中的标签marquee不在被W3C作为标准采纳，在可遇见的未来也会慢慢的被各大浏览器抛弃，直至废弃，为什么被废弃呢，经过小雨我不辞辛苦的总结有以下几种原因：

marquee这家伙是微软自己创造出来的，现在火狐都支持了，它自己不干了
marquee的效果，必须要前一次滚动完成之后，才会接着下一次，会留白很长一段时间，适合无限向上滚动，无限往左有点瑕疵，并且被部分浏览器废弃，会出现兼容性问题
最重要的是不能暂停，不能暂停，不能暂停 — 功能不完善
搜到了这个啊 —> 就是以后html的规范，只是语意标签，像原来具有样式或者特效功能的标签，比如
<em> <i> <strong>等等都会慢慢废弃

理由够充分吧，是不是被抛弃就合理了，那怎么用js实现这个marquee效果呢，总结了一下，有三中方法：

css定位，无限向左 left++
利用jquery的animate方法
利用jquery的scrollLeft方法

3个实现原理是啥呢，其实很简单，只有结构不一样，但是实现方法基本都是一样的

咱们拿css3定位来说明这个例子，首先看html结构：

<div class="scroll_area"> <!--目标体-->
  <div class="content"> <!-- 显示容器 -->
    <div class="scrolltxt"> <!-- 滚动体 -->
      <span>秦时明月汉时关，万里长征人未还1</span>
      <span>秦时明月汉时关，万里长征人未还2</span>
    </div>
  </div>
</div>

Demo结构

var obj = $('.scroll_area');
var dw = obj.find(".content").width();
var cw = obj.find(".scrolltxt").width();
var cx = 0;

1.首先复制一遍移动体
什么是移动体，就是要滚动的整体，如果横向滚动，则必须用内联标签，咱们这里用span，然后span的父级div即类scrolltxt才是整个移动体

2.制造滚动
什么情况下才能滚动呢，当然是 — 当滚动体的宽度大于显示容器的宽度 — 这样我必须要滚起来，你才能看见全部啊
滚动体为scrolltxt, 显示容器为content，即(".content").width() < (".scrolltxt").width()时才能滚动，否则，不满一屏，当然不能滚动了

3.无限滚动
什么时候才能让滚动体无限滚动下去呢，其实无限滚动就是让目标滚动到最右边即滚动体本身的宽度时，在来一遍嘛，怎么再来一遍这就需要一个技巧了，怎么才能让滚动体滚动到超了滚动体宽度了，还能滚动
延长滚动体-----------> 最简单的就是制造假象，直接全盘复制一遍原滚动体的html，append到最后面，哇，简直太聪明了

看代码：

  obj.find(".scrolltxt").eq(0).append(obj.find(".scrolltxt").eq(0).html());

无限滚动开始
延长是延长了，但是仅仅是制造假象，仅仅是为了让滚动体超过了原滚动体宽度了还能滚，但是作用仅仅如此而已，滚动超过了，还是要原角登场
所以啊，当滚动超过scrolltxt的宽度时，或者是滚动体的宽度减去显示体的宽度，再加上容器宽度时，原滚动体复位，比较拗口吧，上个图吧：

在这里插入图片描述

if (cw > dw) { //宽度超出当前content宽度才滚动
  var scrollval = null;//滚动事件变量
  obj.find(".scrolltxt").eq(0).append(obj.find(".scrolltxt").eq(0).html());
  scrollval = setInterval(function () {
    obj.find(".scrolltxt").eq(0).css({
      "left": "-" + cx + "px"
    })
    if (cx > (cw - dw) + dw)
      cx = 0;
    cx ++;
  }, 30);

但是细心的人还是能看的出来，对第一屏滚动完时的跳动不能容忍，那就完整的模拟一个marquee，无限循环：

function marquee() {
       var dw = $('#rotateWinners').width();
       var cw = $('#scrollArea').width();
       var cx = 0;
       var initX = Math.floor(dw);
       if(cw > dw) {
           setInterval(function () {
               $('#scrollArea').css({
                   'left': cx + 'px'
               });
               if(cx < 0) {
                   if (-cx >= (cw - dw) + dw) {
                       cx = initX;
                   }
               }
               console.log('cx:', cx);
               cx --;
           }, 50)
       }
    }