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

jquery.limarquee是一款非常实用的支持任何DOM元素的JQUERY跑马灯插件。该跑马灯插件可以制作水平文字滚动，垂直文字滚动，HTML元素滚动，图片滚动效果，甚至还可以从XML文件中读取数据来制作跑马灯效果。

预览       下载

 

 使用方法

 HTML结构

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

?

1 2 3

< div class="str1 str_wrap">   ......

 初始化插件

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

?

1 2 3

$(window).load( function (){   $( '.str1' ).liMarquee(); });

 配置参数

下面是该跑马灯插件的一些可用配置参数。

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

 API

 暂停和播放

可以使用下面的方法来暂停和继续播放跑马灯。

?

1 2	$( '.str6' ).liMarquee( 'pause' ); $( '.str6' ).liMarquee( 'play' );

 销毁和更新

?

1 2 3 4 5 6 7 8 9

$( '.str' ).liMarquee(); $( '.destroyBtn' ).on( 'click' , function (){   $( '.str' ).liMarquee( 'destroy' );   return false ; }) $( '.updateBtn' ).on( 'click' , function (){   $( '.str' ).liMarquee( 'update' );   return false ; })

 使用HTML元素作为跑马灯

例如使用一组<span>元素作为跑马灯。

?

1 2 3 4 5 6 7 8 9 10 11 12

< div class="str str_wrap">     < span >1     < span >2     < span >3     < span >4     < span >5     < span >6     < span >7     < span >8     < span >9     < span >0

为这些<span>元素设置一些基本样式。

?

1 2 3 4 5 6 7 8 9 10 11 12 13

.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 ;  }

然后通过下面的方法来初始化跑马灯。

?

1	$( '.str' ).liMarquee();

 使用图片作为跑马灯

使用图片作为跑马灯和使用HTML元素作为跑马灯的方法基本相同。它的HTML结构如下：

?

1 2 3 4 5 6

< div class="str str_wrap">     < a href="#">< img src="img/1.jpg">     < a href="#">< img src="img/2.jpg">     < a href="#">< img src="img/3.jpg">     ...

初始化图片跑马灯。

?

1	$( '.str' ).liMarquee();