Velocity.js初识

Velocity.js官网：http://julian.com/research/velocity/

兼容IE8和Android2.3

 

Velocity.js基本用法

效果图：

CSS

.box{
    width:100px;
    height:100px;
    background-color:pink;      
}

　

JS

(function($){
    $('#div1').velocity({
        width: '300px',
        height: '300px'
    },{
        duration:3000　　//动画的时长
    });
})(jQuery);

 

　　

 

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf8 />
        <title>velocity基本用法</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/velocity.min.js"></script>
        <script type="text/javascript" src="js/velocity.ui.min.js"></script>
        
    </head>
    <body>
        <div id="div1" class="box"></div>
        <script type="text/javascript" src="js/script1.js"></script>
    </body>
</html>

　

　

制作动画序列的三种方法

效果图：

CSS

.box{
    width:100px;
    height:100px;
    background-color:pink;      
}

　　

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf8 />
        <title>制作序列动画</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/velocity.min.js"></script>
        <script type="text/javascript" src="js/velocity.ui.min.js"></script>
        
    </head>
    <body>
        <div id="div1" class="box"></div>
        <div id="div2" class="box"></div>
        <script type="text/javascript" src="js/script1.js"></script>
    </body>
</html>

　　

JS

方法一：

(function($){
   $('#div1').velocity({
        width: '300px'
    },{
        duration:3000
    });
    $('#div2').velocity({
         width: '300px'
    },{
         duration:3000,
         delay:3000　　　　//动画的延迟时间
    });
    $('#div3').velocity({
         width: '300px'
    },{
         duration:3000,
         delay:6000
    });
})(jQuery);

　　

方法二：

 

(function($){
   $('#div1').velocity({
     width:'300px'
    },{
     duration:3000,
     complete:function(){
         $('#div2').velocity({
             width:'300px'
         },{
             duration:3000,
             complete:function(){
                 $('#div3').velocity({
                     width:'300px'
                 },{
                     duration:3000
                 });
             }
         });
     }
    });
})(jQuery);

 

 

方法三：

(function($){
   var seq = [
   {
    elements:$('#div1'),
    properties:{width:'300px'},
    options:{duration:3000}
   },
   {
    elements:$('#div2'),
    properties:{width:'300px'},
    options:{duration:3000}
   },
   {
    elements:$('#div3'),
    properties:{width:'300px'},
    options:{duration:3000}
   }
   ];
   $.Velocity.RunSequence(seq);
})(jQuery);

 

 

效果图：

 

预定义动画

(function($){
    $('#div1').on('mouseover',function(){
        $(this).velocity('callout.shake');
    });
})(jQuery);

//callout.shake:Velocity预定义动画

更多预定义方法：http://julian.com/research/velocity/

 

 

效果图：

 

自定义动画

(function($){
    $.Velocity.RegisterUI('HS.pulse',{ //用RegisterUI这个函数定义一个动画(也可用RegisterEffect来定义，效果一样)
        defaultDuration:3000,     //动画时间
        calls:[
            [{scaleX:1.5},0.5], //scaleX：动画在X轴的比例变化
            [{scaleX:1.0},0.5]  //0.5是动画时间所占用的百分比
        ]
    });
    $('#div2').on('mouseover',function(){
        $(this).velocity('HS.pulse');
    });
})(jQuery);

 

posted @ 2016-02-14 15:32  嘆世殘者——華帥  阅读(827)  评论(0)    收藏  举报