你的位置:首页 > Java教程

[Java教程]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" ></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" ></div>    <div id="div2" ></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);