码迷,mamicode.com
首页 > Web开发 > 详细

jQuery.Marquee

时间:2019-11-09 19:48:50      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:ons   tom   log   use   near   jquer   左右移动   循环   暂停   

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>

使用一个块级元素作为跑马灯的容器。

<div id="container">跑马灯文字</div>

在页面DOM元素加载完毕之后,通过marquee()方法来初始化该插件。一共有三个可选参数,一个回调方法。

$(dom).marquee(options, callback);

options 可选参数:
options : {
    direction : top,
    pixels : 5,
    speed : 30,
}
direction

移动方向:
    左:left
    右:right
    上:top
    下:bottom;
pixels

每次移动的像素数
speed

两次移动之前的间隔时间数(毫秒)
调用方法如下:

$("scroll-a").marquee();
 
$("scroll-b").marquee({direction:top});

$("scroll-c").marquee({direction:right,pixels:2,speed:30});
 
$("scroll-d").marquee({direction:"bottom",pixels:2,speed:30}, function(){
    console.log("执行了一次");
});

 

$(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.Marquee

标签:ons   tom   log   use   near   jquer   左右移动   循环   暂停   

原文地址:https://www.cnblogs.com/hofmann/p/11827076.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!