jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
使用方法
在页面中引入jquery和jquery.marquee.js文件。
<script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.marquee.js" type="text/javascript"></script>
如果需要跑马灯的暂停效果,引入jquery.marquee.js文件。
<script src="js/jquery.pause.js" type="text/javascript"></script>
如果需要使用easing动画效果,引入jquery.easing.js文件。
<script src="js/jquery.easing.min.js" type="text/javascript"></script>
HTML结构
使用一个块级元素作为跑马灯的容器。
<div id="container">跑马灯文字</div>
初始化插件
在页面DOM元素加载完毕之后,通过marquee()
方法来初始化该插件。
$(function(){ $('.marquee').marquee(); });
配置参数
该跑马灯插件的可用配置参数有:
-
allowCss3Support
:如果浏览器支持CSS3动画,则使用CSS3动画。默认为true
。 -
css3easing
:CSS3 easing效果,默认为'linear'
。 -
easing
:jquery easing效果,默认为'linear'
。 -
delayBeforeStart
:开始动画的延迟时候,单位毫秒,默认为1000。 -
direction
:跑马灯动画的方向。默认为left
。 -
duplicated
:是否复制文本。默认为false。 -
duration
:动画的持续时间,单位毫秒,默认为5000。 -
speed
:speed
参数会覆盖duration
。 -
gap
:tickers之间的间隙。单位像素,默认为20。 -
pauseOnHover
:在hover时暂停跑马灯。 -
pauseOnCycle
:在循环结束,暂停跑马灯delayBeforeStart
毫秒。 -
startVisible
:跑马灯在开始时是否可见。
该jQuery跑马灯插件的github地址为:https://github.com/aamirafridi/jQuery.Marquee
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!