JQUERY插件-jQuery.Marquee文字跑马灯插件


原文地址:http://www.bluestep.cc/jquery%E6%8F%92%E4%BB%B6-jquery-marquee%E6%96%87%E5%AD%97%E8%B7%91%E9%A9%AC%E7%81%AF%E6%8F%92%E4%BB%B6/

 

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:跑马灯在开始时是否可见。

源码地址:https://github.com/aamirafridi/jQuery.Marquee

在线预览 网盘下载


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM