jquery.limarquee是一款非常实用的支持任何DOM元素的JQUERY跑马灯插件。该跑马灯插件可以制作水平文字滚动，垂直文字滚动，HTML元素滚动，图片滚动效果，甚至还可以从XML文件中读取数据来制作跑马灯效果。
预览 下载
使用方法
HTML结构
该跑马灯特效最基本的HTML结构是使用一个<div>来包裹需要滚动的文字。
< div class="str1 str_wrap">......
初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该跑马灯插件。
$(window).load( function (){$( '.str1' ).liMarquee();
});
配置参数
下面是该跑马灯插件的一些可用配置参数。
direction：跑马灯运动的方向，可选值有：left,right,up和down。drag：是否可以使用鼠标来拖拽文本。hoverstop：是否在鼠标滑过时暂停文本的播放。xml：从XML文本中获取跑马灯的文本。scrollamount：跑马灯的滚动速度。
API
暂停和播放
可以使用下面的方法来暂停和继续播放跑马灯。
$( '.str6' ).liMarquee( 'pause' ); $( '.str6' ).liMarquee( 'play' );
销毁和更新
$( '.str' ).liMarquee();
$( '.destroyBtn' ).on( 'click' , function (){$( '.str' ).liMarquee( 'destroy' );return false ;
})
$( '.updateBtn' ).on( 'click' , function (){$( '.str' ).liMarquee( 'update' );return false ;
})
使用HTML元素作为跑马灯
例如使用一组<span>元素作为跑马灯。
< 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>元素设置一些基本样式。
.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 ;}
然后通过下面的方法来初始化跑马灯。
$( '.str' ).liMarquee();
使用图片作为跑马灯
使用图片作为跑马灯和使用HTML元素作为跑马灯的方法基本相同。它的HTML结构如下：
< 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">...
初始化图片跑马灯。
$( '.str' ).liMarquee();
