jQuery简单文字跑马灯特效

PetitQ 文本/链接 2018-11-12 3.04K 0 1

这是一款非常简单的 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 简单文字跑马灯特效

已有 760 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

文本/链接

jQuery简单文字跑马灯特效

使用方法:

HTML 结构:

CSS 样式:

初始化插件:

配置参数:

jQuery 简单文字跑马灯特效

相关文章

Hexaflip 超强CSS3立方体插件

jQuery文字动画特效插件

纯CSS3炫酷彩色粉笔字特效

发表回复取消回复

热销模板

文本/链接

使用方法:

HTML 结构:

CSS 样式:

初始化插件:

配置参数:

jQuery 简单文字跑马灯特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复