插件描述：jquery.limarquee是一款非常实用的支持任何DOM元素的jQuery跑马灯插件。
插件说明
jquery.limarquee是一款非常实用的支持任何DOM元素的jQuery跑马灯插件。该跑马灯插件可以制作水平文字滚动，垂直文字滚动，HTML元素滚动，图片滚动效果，甚至还可以从XML文件中读取数据来制作跑马灯效果。
使用方法
HTML结构
该跑马灯特效最基本的HTML结构是使用一个<div>来包裹需要滚动的文字。
1 2 3 | <div class="str1 str_wrap"> ...... </div> |
初始化插件
在页面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> <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>元素设置一些基本样式。
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> <a href="#"><img src="img/2.jpg"></a> <a href="#"><img src="img/3.jpg"></a> ...</div> |
初始化图片跑马灯。
1 | $('.str').liMarquee(); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 纯js写的祝愿墙
- 下一个特效： iscroll 上拉加载下拉刷新