jquery.limarquee是一款非常实用的支持任何DOM元素的jQuery跑马灯插件。该跑马灯插件可以制作水平文字滚动，垂直文字滚动，HTML元素滚动，图片滚动效果，甚至还可以从XML文件中读取数据来制作跑马灯效果。
使用方法
HTML结构
该跑马灯特效最基本的HTML结构是使用一个<div>来包裹需要滚动的文字。
<div class="str1 str_wrap"> ...... </div> |
初始化插件
在页面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> <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>元素设置一些基本样式。
.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> <a href="#"><img src="img/2.jpg"></a> <a href="#"><img src="img/3.jpg"></a> ...</div> |
初始化图片跑马灯。
$('.str').liMarquee(); |
