jquery动画切换引擎插件 Velocity.js 学习02
案例实践：
- 第一页会以动画形式进入页面；
- 点击进入按钮时，第一页以动画消失，第二页以动画形式进入，同时四张图片也定义从小到大的动画形式；
- 第二页关闭按钮点击时，先是四张图片以缩小动画消失，然后第二页以动画形式消失，第一页以动画形式进入。
JS代码:
(function(){ // 定义变量 var container = $('.container'); //主容器 var boxFront = $('.box-front'); //卡片正面 var mkLogo = $('.img-head'); //卡片logo(火焰logo) var boxBack = $('.box-back'); //卡片背面 var boxBackImgs= $('.box-back').find('img'); //卡片背面中四幅图片 // 自定义动画---进入 $.Velocity.RegisterUI('mk.slideUp',{ defaultDuration:500, calls:[ [{opacity:[1,0],translateY:[0,100]}] ] }); // 自定义动画---消失 $.Velocity.RegisterUI('mk.slideDown',{ defaultDuration:300, calls:[ [{opacity:[0,1],translateY:[100,0]}] ] }) // 自定义动画---图片弹性放大 $.Velocity.RegisterUI('mk.scaleImg',{ //定义动画名称 defaultDuration:500, calls:[ [{opacity:[1,0],scale:[1,0]}] //[1,0]表示[结束状态,开始状态] ] }) // 自定义动画---图片弹性缩小 $.Velocity.RegisterUI('mk.scaleImg02',{ defaultDuration:500, calls:[ [{opacity:[0,1],scale:[0,1]}] ] }) // 定义正面进入序列 var seqFront = [ { elements:container, properties:'mk.slideUp', options:{ delay:300 // 设置延时 } }, { elements:boxFront, properties:'mk.slideUp', options:{ sequenceQueue:false // 设置队列形式为同时 } }, { elements:mkLogo, properties:'mk.slideUp', options:{ sequenceQueue:false, delay:60 } } ]; // 定义点击“进入”按钮正面消失的序列及背面出现的序列 var btnClick = [ { elements:container, properties:'mk.slideDown' }, { elements:boxFront, properties:'mk.slideDown', options:{ sequenceQueue:false } }, { elements:mkLogo, properties:'mk.slideDown', options:{ sequenceQueue:false } },{ elements:container, properties:'mk.slideUp', options:{ delay:100 } },{ elements:boxBack, properties:'mk.slideUp', options:{ sequenceQueue:false } },{ elements:boxBackImgs, properties:'mk.scaleImg', options:{ delay:60 } } ]; // 定义点击“关闭”按钮背面消失的序列和正面出现的序列 var closeClick = [ { elements:boxBackImgs, properties:'mk.scaleImg02', options:{ sequenceQueue:false } }, { elements:container, properties:'mk.slideDown' }, { elements:boxBack, properties:'mk.slideDown', options:{ sequenceQueue:false } }, { elements:container, properties:'mk.slideUp', options:{ delay:200 } },{ elements:boxFront, properties:'mk.slideUp', options:{ sequenceQueue:false } },{ elements:mkLogo, properties:'mk.slideUp', options:{ sequenceQueue:false } } ]; // 初始化正面 $.Velocity.RunSequence(seqFront); // 正面进入按钮点击事件 $('.btn').on('click',function(){ $.Velocity.RunSequence(btnClick); }) // 背面关闭按钮点击事件 $('.close').on('click',function(){ $.Velocity.RunSequence(closeClick); }) })(jQuery)
HTML代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画案例</title> <link rel="stylesheet" href="exmple.css"> <script src="js/jquery.js"></script> <script src="js/velocity.min.js"></script> <script src="js/velocity.ui.min.js"></script> </head> <body> <div class="container"> <!-- 卡片正面 --> <div class="box-front"> <img class="img-back" src="imgs/back.jpg" alt=""> <img class="img-head" src="imgs/head.jpg" alt=""> <div class="intro"> <h3>慕课网</h3> <span>慕课网,只学有用的。</span> <a class="btn" href="##">点击进入</a> </div> </div> <!-- 卡片背面 --> <div class="box-back"> <div class="close">x</div> <h3>慕课网</h3> <span>慕课网,只学有用的。</span> <img src="imgs/pic1.jpg" alt=""> <img src="imgs/pic2.jpg" alt=""> <img src="imgs/pic3.jpg" alt=""> <img src="imgs/pic4.jpg" alt=""> </div> </div> <script src="js/exmple.js"></script> </body> </html>
CSS样式:
*{ margin: 0; padding: 0; } body{ background-color: #333; overflow-y:hidden; } .container{ width: 320px; height: 430px; background-color: #fff; margin: 60px auto; position: relative; } /*正面*/ .box-front{ position: relative; z-index: 2; } .img-back{ width: 320px; height: 213px; } .img-head{ position: absolute; top: 213px; left: 50%; width: 90px; height: 90px; border-radius: 50%; margin-left: -45px; margin-top: -45px; border:2px solid #f0f0f0; } .intro{ margin-top: 45px; text-align: center; } .intro h3{ display: inline-block; width: 100%; margin-top: 5px; } .intro span{ display: inline-block; width: 100%; margin-top: 15px; } .intro .btn{ display: inline-block; width: 82%; color: #fff; background-color: #2444FF; padding: 10px; text-decoration: none; border-radius: 6px; margin-top: 40px; transition: background 1s; cursor: pointer; } .intro .btn:hover{ background-color: #2468FF; } /*卡片背面样式*/ .box-back{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #333; z-index: 1 } .box-back .close{ position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; line-height: 10px; font-size: 18px; color:#999; cursor: pointer; } .box-back .close:hover{ color: #f00; } .box-back h3{ text-align: center; margin-top: 20px; font-size: 24px; } .box-back span{ display: block; text-align: center; font-size: 16px; margin: 10px 0 30px; } .box-back img{ display: inline-block; margin: 0px 0px 12px 10px; width: 143px; } .container,.box-front,.img-head,.box-back,.box-back img{ opacity: 0; }
