其他代码
支持DOM元素jQuery跑马灯插件
PetitQ
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：跑马灯的滚动速度
暂停播放:
可以使用下面的方法来暂停和继续播放跑马灯。
$('.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();
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
