标签: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:跑马灯在开始时是否可见。
标签:ons tom log use near jquer 左右移动 循环 暂停
原文地址:https://www.cnblogs.com/hofmann/p/11827076.html