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();
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!