javascript模拟marquee跑马灯效果

随着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);

好啦,到这里就完美模拟出跑马灯效果了,给大家也附上无限向上滚动,以及animate的实现方法,供大家参考
跑马灯无限往左-animate
跑马灯无限往上
跑马灯无限向左-left

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章