jQuery简单的文字跑马灯特效

所属分类:UI-滚动

 104420  75  查看评论 (27)
jQuery简单的文字跑马灯特效 ie兼容10

更新时间:2018/2/8 下午3:21:52

更新说明:修正8个li以后的重叠问题。


这是一款非常简单的jQuery文字跑马灯特效插件。该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动。

使用方法

使用该跑马灯特效之前要先引入jQuery和marquee.js文件。

<script src="jquery-1.11.2.min.js"></script>
<script src="marquee.js"></script>

HTML结构

跑马灯中的文字使用无序列表来制作,外面使用一个<div>作为包裹容器。

<div class="container">
  <div class="marquee-sibling"> Breaking News </div>
  <div class="marquee">
    <ul class="marquee-content-items">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
</div>

CSS样式

下面是该跑马灯特效的一些基本样式。

.container {
  width: 100%;
  background: #4FC2E5;
  float: left;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  height: 45px;
  position: relative;
  cursor: pointer;
}
 
.marquee-sibling {
  padding: 0;
  background: #3BB0D6;
  width: 20%;
  height: 45px;
  line-height: 42px;
  font-size: 12px;
  font-weight: normal;
  color: #ffffff;
  text-align: center;
  float: left;
  left: 0;
  z-index: 2000;
}
 
.marquee,
*[class^="marquee"] {
  display: inline-block;
  white-space: nowrap;
  position: absolute;
}
 
.marquee { margin-left: 25%; }
 
.marquee-content-items {
  display: inline-block;
  padding: 5px;
  margin: 0;
  height: 45px;
  position: relative;
}
 
.marquee-content-items li {
  display: inline-block;
  line-height: 35px;
  color: #fff;
}
 
.marquee-content-items li:after {
  content: "|";
  margin: 0 1em;
}

初始化插件

$(function (){
  createMarquee();
});

在页面加载完毕之后,可以通过下面的方法来初始化该跑马灯插件。

配置参数

下面是该跑马灯特效的可用配置参数。

$(function (){
 
  createMarquee({
     
    // controls the speed at which the marquee moves
    duration:30000, 
 
    // right margin between consecutive marquees
    padding:20, 
 
    // class of the actual div or span that will be used to create the marquee - 
    // multiple marquee items may be created using this item's content. 
    // This item will be removed from the dom
    marquee_class:'.example-marquee', 
 
    // the container div in which the marquee content will animate. 
    container_class: '.example-container', 
 
    // a sibling item to the marqueed item  that affects - 
    // the end point position and available space inside the container. 
    sibling_class: '.example-sibling', 
 
    // Boolean to indicate whether pause on hover should is required. 
    hover: false
 
  });
 
});
相关插件-滚动

jQuery美化滚动条插件mCustomScrollbar

mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义
  滚动
 6041  40

zepto移动端全屏滚动

移动端整屏滚动效果
  滚动
 6763  16

jQuery滚动堆叠插件jquery.stacked-strips.js

为您的一页滚动网站和单页应用程序创建堆叠滚动效果。当您向下滚动网页时,插件可以逐个滚动固定的页面部分。
  滚动
 6061  35

HTML5单页面全屏滚动特效

全屏滚动代码简单,非常适合新手。
  滚动
 18367  123

讨论这个项目(27)回答他人问题或分享插件使用方法奖励jQ币

    深秋。 0
    2018/5/10 14:46:59
    关于IE8的兼容性应该是因为引用的JQ2.x 如果使用JQ1.11.0则不存在兼容问题。 回复
    0
    2018/3/22 15:46:42
    不错不错不错不错 回复
    陌路殇 0
    2018/2/8 14:12:26
    8个li以后有重叠 希望修改一下。。。下载的人请慎重考虑
        西瓜0
        2018/2/8 15:24:59
        已修改好了,请重新下载。
    回复
    雕刻时光 0
    2017/10/26 0:49:41

    太卡了GPU占用率高

    回复
    Provence 0
    2017/10/15 15:49:26
    lianger 0
    2017/8/23 17:09:37

    重叠严重   很烂

    回复
    ‘’掠 0
    2017/8/16 15:41:42
    里面最多放8个li    再多的话,第二次会出现文字重叠,请问一下作者,这个问题应该怎么解决一下啊 回复
    黄然人 0
    2017/8/13 15:44:54

    感谢,很漂亮的插件

    回复
    newmyself 0
    2017/7/19 19:36:10

    bug非常多,几乎不能用,重叠问题非常严重

    回复
    秦潇潇 0
    2017/6/19 14:48:40

    bug很多。重叠、兼容性等

    回复
取消回复