当前位置：首页 > 网页特效 > 文字效果

jQuery简单的文字跑马灯特效

分类：文字效果日期：2024-05-14 点击(0) 评论(0)

jQuery简单的文字跑马灯特效

简介

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

```html
<script src="jquery-1.11.2.min.js"></script>
<script src="marquee.js"></script>      
```          
#####  HTML结构
跑马灯中的文字使用无序列表来制作，外面使用一个div作为包裹容器。

```html
<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样式
下面是该跑马灯特效的一些基本样式。

```html
.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;
}
      
```    
#####  初始化插件
在页面加载完毕之后，可以通过下面的方法来初始化该跑马灯插件。

```html
$(function (){
  createMarquee();
});
```
                
#####  配置参数
下面是该跑马灯特效的可用配置参数。

```html
$(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
 
  });
 
});
```

web299.com

jQuery简单的文字跑马灯特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果