首页 > 代码库 > 分享JQuery动画插件Velocity.js的六种列表加载特效
分享JQuery动画插件Velocity.js的六种列表加载特效
分享JQuery动画插件Velocity.js的六种列表加载特效。在这款实例中给中六种不同的列表加载效果。分别为从上飞入、从右侧飞入、从左侧飞入、和渐显。一起看下效果图：
在线预览 源码下载
实现的代码。
html代码：
<h1> Velocity.js <i>slice + sequence</i></h1> <pre>Only anim X number with FX#1, animate Y number with FX#2 etc / Read JS source for more<span>v1.0 – Added code</span></pre> <div id="btn"> <i class="type1">Run type 1</i> <i class="type2">Type 2</i> <i class="type3">Type 3</i> <i class="type4">Type 4</i> <i class="type5">Type 5</i> <i class="type6">Type 6</i></div> <div id="boxes"> <!-- load via JSONP --> </div> <!-- /#boxes --> <script src=‘jquery.js‘></script> <script src=‘velocity.min.js‘></script> <script src=‘velocity.ui.min.js‘></script> <script>/* + jquery.js + velocity.js + velocity.ui.js*//* -----------------------------------------------------VELOCITY.JS SLUCE + SEQUENCEAnimate different boxes with different animations and sequence it.This demo has a bounch of stuff not needed for a basic slice + sequencesince everything is wrapped up in a function and lots of if/else statements.For basic usage of using Velocity sequence go to:http://julian.com/research/velocity/#uiPack----------------------------------------------------- */// Define base divvar boxes = $(‘#boxes‘);/* -----------------------------------------------------REGISTER CLICK EVENTS FOR BUTTONS----------------------------------------------------- */$(‘.type1‘).click(function(){ goVelocity(true);})$(‘.type2‘).click(function(){ goVelocity(true, ‘custom.flickDownIn‘, ‘custom.flickUpIn‘, vOption2);})$(‘.type3‘).click(function(){ goVelocity(true, ‘custom.zoomOutIn‘, ‘custom.zoomInIn‘, vOption3);})$(‘.type4‘).click(function(){ goVelocity(true, ‘custom.superZoomOutIn‘, ‘custom.superZoomOutIn‘, vOption4);})$(‘.type5‘).click(function(){ goVelocity(‘type5‘, ‘‘, ‘‘, vOption5);})$(‘.type6‘).click(function(){ goVelocity(‘type7‘, ‘‘, ‘‘, vOption5);})/* -----------------------------------------------------GET SOME CONTENTS100% UNRELATED to animation, scroll down the ‘real‘ stuff----------------------------------------------------- */boxes.append(‘<div id="load">Loading data...</div>‘)var getMax = 12;var str = ‘‘;//var tags = ‘tommiehansen+sunset‘;vartags = ‘tommiehansen‘,sort = ‘interestingness-desc‘;uri = "http://pipes.yahoo.com/pipes/pipe.run?_id=6b12dfa3cc61dcafcdcb116bc8114e0b&_render=json&search="+tags+"&sort="+sort+"&num="+getMax;$.getJSON(uri, function(data) { $.each(data.value.items, function(i,item){ //var img = item.media.m; var img = item.guid; img = img.replace(‘.jpg‘,‘_m.jpg‘); str += ‘<div class="box">‘; str += ‘<a href="http://www.mamicode.com/‘ + "http://www.w2bc.com" + ‘" target="_blank">‘; str += ‘<img src="http://www.mamicode.com/‘ + img + ‘" width="240" height="159" /></a>‘; str += ‘<div class="boxRight"><h3>‘ + item.title + ‘</h3><i>Photo <span>by</span> ‘; str += ‘<a href="http://www.mamicode.com/‘ + "http://www.w2bc.com" + ‘" target="_blank">Tommie Hansen</a> / flickr</i>‘; str += ‘</div></div>‘; if (i == getMax-1) { return false; } }); boxes.empty().append(str); goVelocity(); // run initial });/* -----------------------------------------------------BEGIN VELOCITY ANIMATIONS----------------------------------------------------- */// Register new animations$.Velocity.RegisterUI("custom.slideUpIn", { defaultDuration: 500, calls: [[ { opacity: [1,0], translateY: [0,90], translateZ: 0 } ]]});$.Velocity.RegisterUI("custom.slideDownIn", { defaultDuration: 500, calls: [[ { opacity: [1,0], translateY: [0,-90], translateZ: 0 } ]]});$.Velocity.RegisterUI("custom.slideLeftIn", { defaultDuration: 500, calls: [[ { opacity: [1,0], translateX: [0,-90], translateZ: 0 } ]]});$.Velocity.RegisterUI("custom.slideRightIn", { defaultDuration: 500, calls: [[ { opacity: [1,0], translateX: [0,90], translateZ: 0 } ]]});$.Velocity.RegisterUI("custom.zoomOutIn", { defaultDuration: 500, calls: [[ { opacity: [1,0], scale:[1,1.5], translateZ: 0 } ]]});$.Velocity.RegisterUI("custom.zoomInIn", { defaultDuration: 500, calls: [[ { opacity: [1,0], scale:[1,0.5], translateZ: 0 } ]]});$.Velocity.RegisterUI("custom.superZoomOutIn", { defaultDuration: 500, calls: [[ { opacity: [1,0], scale:[1,5], translateZ: 0, translateY: [0,500] } ]],});$.Velocity.RegisterUI("custom.flickUpIn", { defaultDuration: 500, calls: [[ { opacity: [1,0], translateY: [0,90], rotateZ: [0,10], translateZ: 0 } ]]});$.Velocity.RegisterUI("custom.flickDownIn", { defaultDuration: 500, calls: [[ { opacity: [1,0], translateY: [0,-90], rotateZ: [0,-10], translateZ: 0 } ]]});$.Velocity.RegisterUI("custom.fadeOut", { defaultDuration: 300, calls: [[ { opacity: 0, translateZ: 0 } ]], reset: { translateY:0, opacity:0, rotateZ:0, scale:1, translateX:0 }});// Define some Velocity option VARs for re-use etcvar vOption = { duration: 400, stagger: 60, easing: ‘easeOutQuad‘, display: false };var vOption2 = { duration: 300, stagger: 90, easing: ‘easeOutExpo‘, display: false };var vOption3 = { duration: 300, stagger: 60, easing: ‘easeOutQuad‘, display: false };var vOption4 = { duration: 700, stagger: 60, easing:‘easeOutQuad‘, display: false };var vOption5 = { duration: 500, easing:‘easeOutQuad‘, display: false };var vOption6 = { duration: 500, easing:‘easeOutQuad‘, display: false, sequenceQueue: false };// Default transitionsvar anim1 = ‘custom.slideLeftIn‘,anim2 = ‘custom.slideRightIn‘;function goVelocity(isOut, ani1, ani2, vOpt) { if(!ani1) { ani1 = anim1, ani2 = anim2 }; if(!vOpt) { vOpt = vOption; }; // base VARs var box = boxes.find(‘.box‘); // Slice boxes to different groups (for IN-transitions) var slice1 = 3, // 1-3 slice2 = 6, // 4-6 slice3 = 9; // 7-9 // setup Velocity sequence var seq1 = box.slice(0, slice1).get(), // .get() = transform jquery object to raw DOM nodes seq2 = box.slice(slice1, slice2).get(), seq3 = box.slice(slice2, slice3).get(), seq4 = box.slice(slice3).get(); // rest of elements after slice3 var velocitySequence; $.Velocity(box.get(), "stop"); // stop all animation if one is already running // Begin a lot of if() if(isOut==true){ velocitySequence = [ { elements: box.get(), properties: ‘custom.fadeOut‘, options: vOption }, { elements: seq1, properties: ani1, options: vOpt }, { elements: seq2, properties: ani2, options: vOpt }, { elements: seq3, properties: ani1, options: vOpt }, { elements: seq4, properties: ani2, options: vOpt } ]; $.Velocity.RunSequence(velocitySequence); } else if(isOut==‘type5‘){ var b = box.get(); // convert to raw dom nodes var nth1 = box.filter(‘:nth-child(3n+1)‘).get(); var nth2 = box.filter(‘:nth-child(3n)‘).get(); var nth3 = box.filter(‘:nth-child(3n-1)‘).get(); velocitySequence = [ { elements: b, properties: ‘custom.fadeOut‘, options: vOption }, { elements: nth1, properties: ‘custom.slideDownIn‘, options: vOpt }, { elements: nth2, properties: ‘custom.slideUpIn‘, options: vOption6 }, { elements: nth3, properties: ‘custom.zoomOutIn‘, options: vOption3 }, ]; $.Velocity.RunSequence(velocitySequence); } else if(isOut==‘type6‘){ var b = box.get(); // convert to raw dom nodes var one = box.slice(0,1) var two = box.slice(1,3); var three = box.slice(3); velocitySequence = [ { elements: b, properties: ‘custom.fadeOut‘, options: vOption }, { elements: one, properties: ‘custom.slideDownIn‘, options: vOpt }, { elements: two, properties: ‘transition.slideUpIn‘, options: vOption6 }, { elements: three, properties: ‘transition.slideDownIn‘, options: vOption5 }, ]; $.Velocity.RunSequence(velocitySequence); } else if(isOut==‘type7‘){ var b = box.get(); // convert to raw dom nodes //var s1 = box.eq(0); //var s2 = box.eq(4) var s0 = box.slice(0,1); var s1 = box.slice(1,2); var s2 = box.slice(2,3); var s3 = box.filter(‘:nth-child(3n-1)‘); s3 = s3.slice(1); // skip first var s4 = box.filter(‘:nth-child(3n+1)‘); s4 = s4.slice(1); // skip first var s5 = box.filter(‘:nth-child(3n)‘); s5 = s5.slice(1); // skip first velocitySequence = [ { elements: b, properties: ‘custom.fadeOut‘, options: vOption }, { elements: s0, properties: ‘custom.slideLeftIn‘, options: vOpt }, { elements: s1, properties: ‘custom.slideDownIn‘, options: vOption6 }, { elements: s2, properties: ‘custom.slideRightIn‘, options: vOption6 }, { elements: s3, properties: ‘custom.slideUpIn‘, options: vOpt }, { elements: s4, properties: ‘custom.slideLeftIn‘, options: vOpt }, { elements: s5, properties: ‘custom.slideRightIn‘, options: vOption6 }, ]; $.Velocity.RunSequence(velocitySequence); } else { // Page load animation box.css(‘opacity‘, 0); velocitySequence = [ { elements: seq1, properties: ani1, options: vOpt }, { elements: seq2, properties: ani2, options: vOpt }, { elements: seq3, properties: ani1, options: vOpt }, { elements: seq4, properties: ani2, options: vOpt } ]; $.Velocity.RunSequence(velocitySequence); } } // end goVelocity()//@ sourceURL=pen.js </script>
css代码：
html, body { min-height: 100%; } body { font-family: "Open Sans" , helvetica,arial,sans-serif; font-size: 13px; line-height: 160%; font-weight: 300; color: #444; background: #eee; } *, *:before, *:after { box-sizing: border-box; } img { display: block; } i { font-style: normal; } em { font-style: italic; } /* Refresh, add boxes etc */ #a { position: absolute; top: 20px; right: 20px; display: block; background: #eee; color: #aaa; -webkit-user-select: none; user-select: none; } #a i { cursor: pointer; font-size: 11px; padding: 8px 10px; border: 1px dotted #ccc; transition: all .12s; margin-left: -1px; } #a .fa { font-family: "Open Sans" , sans-serif; } #a .fa:last-child { background: #d00; border-color: #d00; color: #fff; } #a .fa:last-child:hover { background: #a00; border-color: #a00; } #btn { text-align: center; margin-top: -30px; } #btn i { cursor: pointer; background: hotpink; color: #fff; padding: 0 14px; margin: 0 2px; line-height: 250%; display: inline-block; transition: all .2s ease; border-radius: 2px; } #btn i:hover { background: #333; } /* ----- end defaults ---- */ /* Main layout */ #boxes { padding-bottom: 1000px; } #boxes, h1, pre { width: 660px; margin: 40px auto; text-align: center; position: relative; } #boxes { width: auto; max-width: 850px; text-align: center; } /*#boxes, .box { transform: translate3d(0,0,0); }*/ /* Headers */ h1, h2 { font-size: 21px; line-height: 100%; font-weight: 300; } h1 { font-size: 24px; font-weight: 700; border-bottom: 1px solid #ccc; } h1 i { font-weight: 300; } pre { display: block; margin-top: -25px; text-transform: uppercase; color: #888; font-size: 11px; letter-spacing: .5px; } pre i { cursor: help; display: inline-block; margin: 0 0 0 3px; } pre i:hover { color: #222; } pre span { color: #aaa; display: block; letter-spacing: 0; } /* Paddings / Margins */ h1 { padding: 20px 0; } h2, h3 { margin: 0 0 12px; } h3 { font-size: 12px; white-space: nowrap; width: auto; overflow: hidden; text-overflow: ellipsis; display: block; margin-top: 4px; } .box { margin: 0 15px 30px; } /* inline-block adds +4px margin */ .box img.full { margin: -1px 0 9px -1px; } .box a { color: inherit; text-decoration: none; border-bottom: 1px dotted #ccc; } .box a:hover { border-color: hotpink; color: hotpink; } /* Boxes */ .box { height: 150px; _opacity: 0; display: block; text-align: left; border: 1px solid #ddd; border-bottom: 1px solid #ccc; background: #fff; width: 240px; height: auto; display: inline-block; } .boxRight { _padding: 15px 40px 0 0; padding: 0 20px; text-align: center; } .boxRight h3 { margin-bottom: 0; } .boxRight i { display: block; font-size: 11px; color: #888; font-style: normal; margin: 0 0 10px 0; } .boxRight i span { font-family: georgia, serif; font-style: italic; font-size: 11px; color: #aaa; }
注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/8233
分享JQuery动画插件Velocity.js的六种列表加载特效
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。