分享JQuery动画插件Velocity.js的六种列表加载特效。在这款实例中给中六种不同的列表加载效果。分别为从上飞入、从右侧飞入、从左侧飞入、和渐显。一起看下效果图：

在线预览   源码下载

实现的代码。

html代码：

  1.  <h1>
  2.         Velocity.js <i>slice + sequence</i></h1>
  3.     <pre>Only anim X number with FX#1, animate Y number with FX#2 etc / Read JS source for more
  4. <span>v1.0 &ndash; Added code</span>
  5. </pre>
  6.     <div id="btn">
  7.         <i class="type1">Run type 1</i> <i class="type2">Type 2</i> <i class="type3">Type 3</i>
  8.         <i class="type4">Type 4</i> <i class="type5">Type 5</i> <i class="type6">Type 6</i></div>
  9.     <div id="boxes">
  10.         <!-- load via JSONP -->
  11.     </div>
  12.     <!-- /#boxes -->
  13.     <script src='jquery.js'></script>
  14.     <script src='velocity.min.js'></script>
  15.     <script src='velocity.ui.min.js'></script>
  16.     <script>/*
  17.   + jquery.js
  18.   + velocity.js
  19.   + velocity.ui.js
  20. */
  21.  
  22. /* -----------------------------------------------------
  23.  
  24. VELOCITY.JS SLUCE + SEQUENCE
  25.  
  26. Animate different boxes with different animations and sequence it.
  27. This demo has a bounch of stuff not needed for a basic slice + sequence
  28. since everything is wrapped up in a function and lots of if/else statements.
  29.  
  30. For basic usage of using Velocity sequence go to:
  31. http://julian.com/research/velocity/#uiPack
  32.  
  33. ----------------------------------------------------- */
  34.  
  35. // Define base div
  36. var boxes = $('#boxes');
  37.  
  38. /* -----------------------------------------------------
  39. REGISTER CLICK EVENTS FOR BUTTONS
  40. ----------------------------------------------------- */
  41.  
  42. $('.type1').click(function(){
  43.   goVelocity(true);
  44. })
  45.  
  46. $('.type2').click(function(){
  47.   goVelocity(true, 'custom.flickDownIn', 'custom.flickUpIn', vOption2);
  48. })
  49.  
  50. $('.type3').click(function(){
  51.   goVelocity(true, 'custom.zoomOutIn', 'custom.zoomInIn', vOption3);
  52. })
  53.  
  54. $('.type4').click(function(){
  55.   goVelocity(true, 'custom.superZoomOutIn', 'custom.superZoomOutIn', vOption4);
  56. })
  57.  
  58. $('.type5').click(function(){
  59.   goVelocity('type5', '', '', vOption5);
  60. })
  61.  
  62. $('.type6').click(function(){
  63.   goVelocity('type7', '', '', vOption5);
  64. })
  65.  
  66. /* -----------------------------------------------------
  67. GET SOME CONTENTS
  68. 100% UNRELATED to animation, scroll down the 'real' stuff
  69. ----------------------------------------------------- */
  70.  
  71. boxes.append('<div id="load">Loading data...</div>')
  72.  
  73. var getMax = 12;
  74. var str = '';
  75. //var tags = 'tommiehansen+sunset';
  76. var
  77. tags = 'tommiehansen',
  78. sort = 'interestingness-desc';
  79. uri = "http://pipes.yahoo.com/pipes/pipe.run?_id=6b12dfa3cc61dcafcdcb116bc8114e0b&_render=json&search="+tags+"&sort="+sort+"&num="+getMax;
  80. $.getJSON(uri,
  81.   function(data) {
  82.     $.each(data.value.items, function(i,item){
  83.      //var img = item.media.m;
  84.      var img = item.guid; img = img.replace('.jpg','_m.jpg');
  85.  
  86.         str += '<div class="box">';
  87.         str += '<a href="' + "http://www.w2bc.com" + '" target="_blank">';
  88.         str += '<img src="' + img + '" width="240" height="159" /></a>';
  89.         str += '<div class="boxRight"><h3>' + item.title + '</h3><i>Photo <span>by</span> ';
  90.         str += '<a href="' +  "http://www.w2bc.com" + '" target="_blank">Tommie Hansen</a> / flickr</i>';
  91.         str += '</div></div>';
  92.  
  93.       if (i == getMax-1) { return false; }
  94.     });
  95.  
  96.     boxes.empty().append(str);
  97.     goVelocity(); // run initial
  98.   });
  99.  
  100. /* -----------------------------------------------------
  101. BEGIN VELOCITY ANIMATIONS
  102. ----------------------------------------------------- */
  103.  
  104. // Register new animations
  105.  
  106. $.Velocity.RegisterUI("custom.slideUpIn", {
  107.   defaultDuration: 500,
  108.   calls: [[ { opacity: [1,0], translateY: [0,90], translateZ: 0 } ]]
  109. });
  110.  
  111. $.Velocity.RegisterUI("custom.slideDownIn", {
  112.   defaultDuration: 500,
  113.   calls: [[ { opacity: [1,0], translateY: [0,-90], translateZ: 0 } ]]
  114. });
  115.  
  116. $.Velocity.RegisterUI("custom.slideLeftIn", {
  117.   defaultDuration: 500,
  118.   calls: [[ { opacity: [1,0], translateX: [0,-90], translateZ: 0 } ]]
  119. });
  120.  
  121. $.Velocity.RegisterUI("custom.slideRightIn", {
  122.   defaultDuration: 500,
  123.   calls: [[ { opacity: [1,0], translateX: [0,90], translateZ: 0 } ]]
  124. });
  125.  
  126. $.Velocity.RegisterUI("custom.zoomOutIn", {
  127.   defaultDuration: 500,
  128.   calls: [[ { opacity: [1,0], scale:[1,1.5], translateZ: 0 } ]]
  129. });
  130.  
  131. $.Velocity.RegisterUI("custom.zoomInIn", {
  132.   defaultDuration: 500,
  133.   calls: [[ { opacity: [1,0], scale:[1,0.5], translateZ: 0 } ]]
  134. });
  135.  
  136. $.Velocity.RegisterUI("custom.superZoomOutIn", {
  137.   defaultDuration: 500,
  138.   calls: [[ { opacity: [1,0], scale:[1,5], translateZ: 0, translateY: [0,500] } ]],
  139. });
  140.  
  141. $.Velocity.RegisterUI("custom.flickUpIn", {
  142.   defaultDuration: 500,
  143.   calls: [[ { opacity: [1,0], translateY: [0,90], rotateZ: [0,10], translateZ: 0 } ]]
  144. });
  145.  
  146. $.Velocity.RegisterUI("custom.flickDownIn", {
  147.   defaultDuration: 500,
  148.   calls: [[ { opacity: [1,0], translateY: [0,-90], rotateZ: [0,-10], translateZ: 0 } ]]
  149. });
  150.  
  151. $.Velocity.RegisterUI("custom.fadeOut", {
  152.   defaultDuration: 300,
  153.   calls: [[ { opacity: 0, translateZ: 0 } ]],
  154.   reset: { translateY:0, opacity:0, rotateZ:0, scale:1, translateX:0 }
  155. });
  156.  
  157. // Define some Velocity option VARs for re-use etc
  158.  
  159. var vOption = { duration: 400, stagger: 60, easing: 'easeOutQuad', display: false };
  160. var vOption2 = { duration: 300, stagger: 90, easing: 'easeOutExpo', display: false };
  161. var vOption3 = { duration: 300, stagger: 60, easing: 'easeOutQuad', display: false };
  162. var vOption4 = { duration: 700, stagger: 60, easing:'easeOutQuad', display: false };
  163. var vOption5 = { duration: 500, easing:'easeOutQuad', display: false };
  164. var vOption6 = { duration: 500, easing:'easeOutQuad', display: false, sequenceQueue: false };
  165.  
  166. // Default transitions
  167. var
  168. anim1 = 'custom.slideLeftIn',
  169. anim2 = 'custom.slideRightIn';
  170.  
  171. function goVelocity(isOut, ani1, ani2, vOpt) {
  172.  
  173.   if(!ani1) { ani1 = anim1, ani2 = anim2 };
  174.   if(!vOpt) { vOpt = vOption; };
  175.  
  176.   // base VARs
  177.   var box = boxes.find('.box');
  178.  
  179.   // Slice boxes to different groups (for IN-transitions)
  180.   var
  181.   slice1 = 3, // 1-3
  182.   slice2 = 6, // 4-6
  183.   slice3 = 9; // 7-9
  184.  
  185.   // setup Velocity sequence
  186.   var
  187.   seq1 = box.slice(0, slice1).get(),        // .get() = transform jquery object to raw DOM nodes
  188.   seq2 = box.slice(slice1, slice2).get(),
  189.   seq3 = box.slice(slice2, slice3).get(),
  190.   seq4 = box.slice(slice3).get();          // rest of elements after slice3
  191.  
  192.   var velocitySequence;
  193.   $.Velocity(box.get(), "stop");  // stop all animation if one is already running
  194.  
  195.   // Begin a lot of if()
  196.  
  197.   if(isOut==true){
  198.     velocitySequence = [
  199.       { elements: box.get(), properties: 'custom.fadeOut', options: vOption },
  200.       { elements: seq1, properties: ani1, options: vOpt },
  201.       { elements: seq2, properties: ani2, options: vOpt },
  202.       { elements: seq3, properties: ani1, options: vOpt },
  203.       { elements: seq4, properties: ani2, options: vOpt }
  204.     ];
  205.  
  206.     $.Velocity.RunSequence(velocitySequence);
  207.   }
  208.  
  209.   else if(isOut=='type5'){
  210.     var b = box.get(); // convert to raw dom nodes
  211.     var nth1 = box.filter(':nth-child(3n+1)').get();
  212.     var nth2 = box.filter(':nth-child(3n)').get();
  213.     var nth3 = box.filter(':nth-child(3n-1)').get();
  214.     velocitySequence = [
  215.       { elements: b, properties: 'custom.fadeOut', options: vOption },
  216.       { elements: nth1, properties: 'custom.slideDownIn', options: vOpt },
  217.       { elements: nth2, properties: 'custom.slideUpIn', options: vOption6 },
  218.       { elements: nth3, properties: 'custom.zoomOutIn', options: vOption3 },
  219.     ];
  220.  
  221.     $.Velocity.RunSequence(velocitySequence);
  222.   }
  223.  
  224.   else if(isOut=='type6'){
  225.     var b = box.get(); // convert to raw dom nodes
  226.     var one = box.slice(0,1)
  227.     var two = box.slice(1,3);
  228.     var three = box.slice(3);
  229.     velocitySequence = [
  230.       { elements: b, properties: 'custom.fadeOut', options: vOption },
  231.       { elements: one, properties: 'custom.slideDownIn', options: vOpt },
  232.       { elements: two, properties: 'transition.slideUpIn', options: vOption6 },
  233.       { elements: three, properties: 'transition.slideDownIn', options: vOption5 },
  234.     ];
  235.  
  236.     $.Velocity.RunSequence(velocitySequence);
  237.   }
  238.  
  239.   else if(isOut=='type7'){
  240.     var b = box.get(); // convert to raw dom nodes
  241.     //var s1 = box.eq(0);
  242.     //var s2 = box.eq(4)
  243.     var s0 = box.slice(0,1);
  244.     var s1 = box.slice(1,2);
  245.     var s2 = box.slice(2,3);
  246.     var s3 = box.filter(':nth-child(3n-1)');
  247.     s3 = s3.slice(1); // skip first
  248.     var s4 = box.filter(':nth-child(3n+1)');
  249.     s4 = s4.slice(1); // skip first
  250.     var s5 = box.filter(':nth-child(3n)');
  251.     s5 = s5.slice(1); // skip first
  252.     velocitySequence = [
  253.       { elements: b, properties: 'custom.fadeOut', options: vOption },
  254.       { elements: s0, properties: 'custom.slideLeftIn', options: vOpt },
  255.       { elements: s1, properties: 'custom.slideDownIn', options: vOption6 },
  256.       { elements: s2, properties: 'custom.slideRightIn', options: vOption6 },
  257.       { elements: s3, properties: 'custom.slideUpIn', options: vOpt },
  258.       { elements: s4, properties: 'custom.slideLeftIn', options: vOpt },
  259.       { elements: s5, properties: 'custom.slideRightIn', options: vOption6 },
  260.     ];
  261.  
  262.     $.Velocity.RunSequence(velocitySequence);
  263.   }
  264.  
  265.   else {
  266.     // Page load animation
  267.     box.css('opacity', 0);
  268.     velocitySequence = [
  269.       { elements: seq1, properties: ani1, options: vOpt },
  270.       { elements: seq2, properties: ani2, options: vOpt },
  271.       { elements: seq3, properties: ani1, options: vOpt },
  272.       { elements: seq4, properties: ani2, options: vOpt }
  273.     ];
  274.  
  275.     $.Velocity.RunSequence(velocitySequence);
  276.   }    
  277.  
  278. } // end goVelocity()//@ sourceURL=pen.js
  279.     </script>

css代码：

  1.  html, body
  2.         {
  3.             min-height: 100%;
  4.         }
  5.         body
  6.         {
  7.             font-family: "Open Sans" , helvetica,arial,sans-serif;
  8.             font-size: 13px;
  9.             line-height: 160%;
  10.             font-weight:;
  11.             color: #444;
  12.             background: #eee;
  13.         }
  14.         *, *:before, *:after
  15.         {
  16.             box-sizing: border-box;
  17.         }
  18.         img
  19.         {
  20.             display: block;
  21.         }
  22.         i
  23.         {
  24.             font-style: normal;
  25.         }
  26.         em
  27.         {
  28.             font-style: italic;
  29.         }
  30.  
  31.         /* Refresh, add boxes etc */
  32.         #a
  33.         {
  34.             position: absolute;
  35.             top: 20px;
  36.             right: 20px;
  37.             display: block;
  38.             background: #eee;
  39.             color: #aaa;
  40.             -webkit-user-select: none;
  41.             user-select: none;
  42.         }
  43.         #a i
  44.         {
  45.             cursor: pointer;
  46.             font-size: 11px;
  47.             padding: 8px 10px;
  48.             border: 1px dotted #ccc;
  49.             transition: all .12s;
  50.             margin-left: -1px;
  51.         }
  52.         #a .fa
  53.         {
  54.             font-family: "Open Sans" , sans-serif;
  55.         }
  56.         #a .fa:last-child
  57.         {
  58.             background: #d00;
  59.             border-color: #d00;
  60.             color: #fff;
  61.         }
  62.         #a .fa:last-child:hover
  63.         {
  64.             background: #a00;
  65.             border-color: #a00;
  66.         }
  67.  
  68.         #btn
  69.         {
  70.             text-align: center;
  71.             margin-top: -30px;
  72.         }
  73.         #btn i
  74.         {
  75.             cursor: pointer;
  76.             background: hotpink;
  77.             color: #fff;
  78.             padding: 0 14px;
  79.             margin: 0 2px;
  80.             line-height: 250%;
  81.             display: inline-block;
  82.             transition: all .2s ease;
  83.             border-radius: 2px;
  84.         }
  85.         #btn i:hover
  86.         {
  87.             background: #333;
  88.         }
  89.  
  90.         /* ----- end defaults ---- */
  91.  
  92.         /* Main layout */
  93.         #boxes
  94.         {
  95.             padding-bottom: 1000px;
  96.         }
  97.         #boxes, h1, pre
  98.         {
  99.             width: 660px;
  100.             margin: 40px auto;
  101.             text-align: center;
  102.             position: relative;
  103.         }
  104.         #boxes
  105.         {
  106.             width: auto;
  107.             max-width: 850px;
  108.             text-align: center;
  109.         }
  110.  
  111.         /*#boxes, .box  { transform: translate3d(0,0,0); }*/
  112.  
  113.         /* Headers */
  114.         h1, h2
  115.         {
  116.             font-size: 21px;
  117.             line-height: 100%;
  118.             font-weight:;
  119.         }
  120.         h1
  121.         {
  122.             font-size: 24px;
  123.             font-weight:;
  124.             border-bottom: 1px solid #ccc;
  125.         }
  126.         h1 i
  127.         {
  128.             font-weight:;
  129.         }
  130.  
  131.         pre
  132.         {
  133.             display: block;
  134.             margin-top: -25px;
  135.             text-transform: uppercase;
  136.             color: #888;
  137.             font-size: 11px;
  138.             letter-spacing: .5px;
  139.         }
  140.         pre i
  141.         {
  142.             cursor: help;
  143.             display: inline-block;
  144.             margin: 0 0 0 3px;
  145.         }
  146.         pre i:hover
  147.         {
  148.             color: #222;
  149.         }
  150.         pre span
  151.         {
  152.             color: #aaa;
  153.             display: block;
  154.             letter-spacing:;
  155.         }
  156.  
  157.         /* Paddings / Margins */
  158.         h1
  159.         {
  160.             padding: 20px 0;
  161.         }
  162.         h2, h3
  163.         {
  164.             margin: 0 0 12px;
  165.         }
  166.         h3
  167.         {
  168.             font-size: 12px;
  169.             white-space: nowrap;
  170.             width: auto;
  171.             overflow: hidden;
  172.             text-overflow: ellipsis;
  173.             display: block;
  174.             margin-top: 4px;
  175.         }
  176.         .box
  177.         {
  178.             margin: 0 15px 30px;
  179.         }
  180.         /* inline-block adds +4px margin */
  181.         .box img.full
  182.         {
  183.             margin: -1px 0 9px -1px;
  184.         }
  185.         .box a
  186.         {
  187.             color: inherit;
  188.             text-decoration: none;
  189.             border-bottom: 1px dotted #ccc;
  190.         }
  191.         .box a:hover
  192.         {
  193.             border-color: hotpink;
  194.             color: hotpink;
  195.         }
  196.  
  197.         /* Boxes */
  198.         .box
  199.         {
  200.             height: 150px;
  201.             _opacity:;
  202.             display: block;
  203.             text-align: left;
  204.             border: 1px solid #ddd;
  205.             border-bottom: 1px solid #ccc;
  206.             background: #fff;
  207.             width: 240px;
  208.             height: auto;
  209.             display: inline-block;
  210.         }
  211.  
  212.         .boxRight
  213.         {
  214.             _padding: 15px 40px 0 0;
  215.             padding: 0 20px;
  216.             text-align: center;
  217.         }
  218.         .boxRight h3
  219.         {
  220.             margin-bottom:;
  221.         }
  222.         .boxRight i
  223.         {
  224.             display: block;
  225.             font-size: 11px;
  226.             color: #888;
  227.             font-style: normal;
  228.             margin: 0 0 10px 0;
  229.         }
  230.         .boxRight i span
  231.         {
  232.             font-family: georgia, serif;
  233.             font-style: italic;
  234.             font-size: 11px;
  235.             color: #aaa;
  236.         }

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/8233

分享JQuery动画插件Velocity.js的六种列表加载特效的更多相关文章

  1. JQuery动画插件Velocity.js发布：更快的动画切换速度

    5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度 ...

  2. js之页面列表加载常用方法总结

    导语:最近由于一些事情需要处理,所以没来得及写技术总结了.今天终于可以坐下来好好的梳理一下脉络,说一下那个在日常前端开发过程中,常用到的页面列表加载的方法总结.这里介绍三种方法,分别是分页加载.按钮加 ...

  3. JQuery浮动层Loading页面加载特效

    之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...

  4. jQuery动画切换引擎插件Velocity.js

    Velocity.js 官网 Velocity.js实现弹出式相框 慕课网 极棒的jquery动画切换引擎插件Velocity.js jQ库 (function($){ // 普通调用 /*$('#d ...

  5. Velocity – 另外一款加速的 jQuery 动画插件

    Velocity 是一款 jQuery 插件,重新实现了 $.animate() 方法,提供更高的性能(比 CSS 动画还更快),同时包括一些新的功能,以改进动画工作流程.Velocity 除了包括所 ...

  6. 让网站动起来！12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

  7. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  8. 一款很好用的页面滚动元素动画插件-AOS.JS

    aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. 加载方法 ...

  9. Jquery放大镜插件---imgzoom.js(原创)

    Jquery放大镜插件imgzoom能够实现图片放大的功能,便于与原图进行比较. 使用方法: 1.引入jQuery与imgzoom,imgzoom.css <link rel="sty ...

随机推荐

  1. 重叠IO overlapped I/O 运用详解

    2009年02月21日 星期六 下午 07:54 I/O设备处理必然让主程序停下来干等I/O的完成,对这个问题有 方法一:使用另一个线程进行I/O.这个方案可行,但是麻烦.               ...

  2. HTML5 CANVAS 弹幕插件

    概述 修改了普通弹幕运动的算法,新增了部分功能 详细 代码下载:http://www.demodashi.com/demo/10595.html 修改了普通弹幕运动的算法,新增了部分功能,具体请参看附 ...

  3. Intellij IDEA 设置代码着色

    从visual studio到Eclipse再到Intllij IDEA,其实每个编译器都有自己的风格,但是就美观上来说,个人觉得还是visual studio的代码着色比较美观,exlipse次之, ...

  4. java多线程(一)之继承Thread类

    一.概述 进程:正在执行的应用程序 线程:进程的执行单元,执行路径 单线程:一个应用程序只有一条执行路径 多线程:一个应用程序有多条执行路径 二.两种实现方式, 下面为第一种方式: 继承Thread类 ...

  5. [CXF REST标准实战系列] 二、Spring4.0 整合 CXF3.0,实现测试接口(转)

    转自:[CXF REST标准实战系列] 二.Spring4.0 整合 CXF3.0,实现测试接口 文章Points: 1.介绍RESTful架构风格 2.Spring配置CXF 3.三层初设计,实现W ...

  6. 【LeetCode】12. Integer to Roman (2 solutions)

    Integer to Roman Given an integer, convert it to a roman numeral. Input is guaranteed to be within t ...

  7. 修改apache配置文件去除thinkphp url中的index.php(转)

    例如你的原路径是 http://localhost/test/index.php/index/add那么现在的地址是 http://localhost/test/index/add如何去掉index. ...

  8. Windows下面安装和配置Solr 4.9（一）

       1.Solr下载 下载地址 :http://lucene.apache.org/solr/   2.解压,测试 在example文件夹中找到start.jar文件,用命令提示符运行这个文件:ja ...

  9. 非IE内核浏览器如何支持activex插件

    原文地址:https://blog.csdn.net/johnson2008t/article/details/46126605 之前在一个B/S项目中遇到一个需求,就是客户需要在页面上对报表的布局以 ...

  10. Error_OAF_Flex VO() of flex bean (ExpenseDescFlexs) is null (异常)

    2014-06-17 BaoXinjian