zoukankan      html  css  js  c++  java
  • jQuery.Marquee

    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:跑马灯在开始时是否可见。
  • 相关阅读:
    MySql性能调优三(explain/desc执行计划)
    MySql性能调优二(BTree、B+Tree与索引数据结构)
    MySql性能调优一(存储引擎InnoDB,MyISAM)
    PHP 数组底层实现原理
    哈希算法及其应用场景
    散列表、散列函数和散列冲突
    PHP中的XML解析的5种方法
    特殊的线性表:递归
    Navicat12破解教程(Navicat_Keygen_Patch_By_DFoX V5.6)
    svn服务端安装、迁移教程、Eclipse切换svn连接库
  • 原文地址:https://www.cnblogs.com/hofmann/p/11827076.html
Copyright © 2011-2022 走看看