jQuery简单的文字跑马灯特效

所属分类:UI-滚动

 215363  358  查看评论 (27)
分享到微信朋友圈
X
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
 
  });
 
});
相关插件-滚动

锚点,可以扩展很多功能

锚点定位,代码实现简单,无依赖其它插件
  滚动
 24748  343

jQuery元素滚动监听插件xRoll.js

xRoll.js 元素滚动监听插件 元素出现在窗口的时候在执行自定义的函数
  滚动
 25277  324

jQueryScrollPage单页全屏滚动效果

漂亮的jQuery单页全屏滚动,带视差效果
  滚动
 36908  393

jQuery美化滚动条插件mCustomScrollbar

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

讨论这个项目(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很多。重叠、兼容性等

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复