当前位置：首页 > 网页特效 > 滚动

支持任何DOM元素的实用jQuery跑马灯插件

分类：滚动日期：2024-05-14 点击(0) 评论(0)

简介

##### HTML结构
该跑马灯特效最基本的HTML结构是使用一个<div>来包裹需要滚动的文字。

```html
<div class="str1 str_wrap">
  ...... 
</div>     
```          
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该跑马灯插件。

```html
$(window).load(function(){
  $('.str1').liMarquee();
});    
```          
#####  配置参数
下面是该跑马灯插件的一些可用配置参数。

- direction：跑马灯运动的方向，可选值有：left,right,up和down。
- drag：是否可以使用鼠标来拖拽文本。
- hoverstop：是否在鼠标滑过时暂停文本的播放。
- xml：从XML文本中获取跑马灯的文本。
- scrollamount：跑马灯的滚动速度。
####  API
##### 暂停和播放
可以使用下面的方法来暂停和继续播放跑马灯。

```html
$('.str6').liMarquee('pause');
$('.str6').liMarquee('play');      
```          
#####  销毁和更新
```html
$('.str').liMarquee();
$('.destroyBtn').on('click',function(){
  $('.str').liMarquee('destroy');
  return false;
})
$('.updateBtn').on('click',function(){
  $('.str').liMarquee('update');
  return false;
})                
```
#####  使用HTML元素作为跑马灯
例如使用一组span元素作为跑马灯。

```html
<div class="str str_wrap">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>0</span>
</div>                
```
为这些span元素设置一些基本样式。

```html
.str { background:none !important;}
.str span { 
  border:5px solid #ccc;
  background:#f1f1f1; 
  color:#999; 
  margin:0 5px; 
  text-align:center; 
  font:40px/100px Arial, Helvetica, sans-serif; 
  width:100px; 
  height:100px; 
  display:inline-block; 
  vertical-align:top;
 }            
```    
然后通过下面的方法来初始化跑马灯。

```html
$('.str').liMarquee();
```
#####  使用图片作为跑马灯
使用图片作为跑马灯和使用HTML元素作为跑马灯的方法基本相同。它的HTML结构如下：

```html
<div class="str str_wrap">
    <a href="#"><img src="img/1.jpg"></a>
    <a href="#"><img src="img/2.jpg"></a>
    <a href="#"><img src="img/3.jpg"></a>
    ...
</div>    
```            
初始化图片跑马灯。

```html
$('.str').liMarquee();
```

web299.com

支持任何DOM元素的实用jQuery跑马灯插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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