zepto 移动端案例(动画等) £神魔★判官ぃ 2021-07-25 00:33 362阅读 0赞 处理:滑动页面事件、动画效果(缩放、各方位滑动、抖动、明暗)、 代码示例: **js文件:** $(function(){ //定义方向对象 var direction={ up:1,right:2,down:3,left:4}; //初始化两个页面坐标 var now={ col:1,row:1}; var last={ col:0,row:0}; //上一个页面动画结束标志 var isMoving=false; //定义滑动功能 function movePage(dir) { //初始化参与动画的页面,加'.'是因为可以之间获取dom对象 var lastPage='.page-'+last.col+'-'+last.row; var nowPage='.page-'+now.col+'-'+now.row; //初始化动画类 var inClass='';//进场动画类 var outClass=''; //出场动画类 //匹配方向 switch(dir){ case direction.up: outClass='pg-moveToTop'; inClass='pg-moveFromBottom'; break; case direction.right: outClass='pg-moveToRight'; inClass='pg-moveFromLeft'; break; case direction.down: outClass='pg-moveToBottom'; inClass='pg-moveFromTop'; break; case direction.left: outClass='pg-moveToLeft'; inClass='pg-moveFromRight'; break; } //之前页面退场 $(lastPage).addClass(outClass); //当前页面进场 $(nowPage).removeClass('hide'); $(nowPage).addClass(inClass); isMoving=true; //动画执行完清除动画类,否则添加的重复类只执行一次 //触发滑动事件后,等待600毫秒,即页面完全占据屏幕后,再执行动画 //isMoving页面还未占据屏幕时,不能滑动 //元素若设置了display:none;只有当元素显示的时候,动画才会执行,因此当600毫秒页面完全占据屏幕,才显示元素并加载动画 setTimeout(function(){ $(lastPage).removeClass(outClass); $(lastPage).addClass('hide'); $(lastPage).removeClass('page-current'); $(lastPage).find('img').addClass('hide'); $(nowPage).removeClass(inClass); $(nowPage).addClass('page-current'); $(nowPage).find('img').removeClass('hide'); isMoving=false; },600); } //滑动事件(要先禁止滑动的默认行为) $('.page').swipeUp(function(){ //判断页面是否滑动 if(isMoving) { return; } //出场页面 console.log(1); last.col=now.col; last.row=now.row; //最后一页不能滑动 if(last.col<5) { //进场页面 now.col=last.col+1; now.row=last.row; movePage(direction.up); } }) $('.page').swipeDown(function(){ if(isMoving) { return; } console.log(2); last.col=now.col; last.row=now.row; if(last.col>1) { now.col=last.col-1; now.row=last.row; movePage(direction.down); } }) $('.page').swipeLeft(function(){ if(isMoving) { return; } console.log(3); last.col=now.col; last.row=now.row; console.log(last.col,last.row); //只有第一个页面和最后一个页面无额外页面,并且左右只有两个页面 if(last.col<5&&last.col>1&&last.row==1) { now.row=last.row+1; now.col=last.col; movePage(direction.left); console.log(now.col,now.row); } }) $('.page').swipeRight(function(){ if(isMoving) { return; } console.log(4); last.col=now.col; last.row=now.row; //只有第一个页面和最后一个页面无额外页面,并且左右只有两个页面 if(last.col<5&&last.col>1&&last.row==2) { now.row=last.row-1; now.col=last.col; movePage(direction.right); } }) }) -------------------- **动画css文件:** /*定义四方向的动画*/ /*向上滑动*/ /*进场*/ .pg-moveToTop{ animation:moveToTop 0.6s ease both; } /*出场*/ .pg-moveFromBottom{ animation:moveFromBottom 0.6s ease both; } /*向下滑动*/ .pg-moveToBottom{ animation:moveToBottom 0.6s ease both; } .pg-moveFromTop{ animation:moveFromTop 0.6s ease both; } /*向左滑动*/ .pg-moveToLeft{ animation:moveToLeft 0.6s ease both; } .pg-moveFromRight{ animation:moveFromRight 0.6s ease both; } /*向右滑动*/ .pg-moveToRight{ animation:moveToRight 0.6s ease both; } .pg-moveFromLeft{ animation:moveFromLeft 0.6s ease both; } /*向上*/ @keyframes moveToTop{ /*因为是出场,从元素最初设置的默认位置向上移动整个元素的高度*/ from { } to { transform:translateY(-100%)} } @keyframes moveFromBottom{ /*因为是进场,从离默认位置的下方距离一个元素的高度向上移动到默认位置*/ from { transform:translateY(100%)} to { } } /*向下*/ @keyframes moveToBottom{ from { } to { transform:translateY(100%)} } @keyframes moveFromTop{ from { transform:translateY(-100%)} to { } } /*向右*/ @keyframes moveToRight{ from { } to { transform:translateX(100%)} } @keyframes moveFromLeft{ from { transform:translateX(-100%)} to { } } /*向左*/ @keyframes moveToLeft{ from { } to { transform:translateX(-100%)} } @keyframes moveFromRight{ from { transform:translateX(100%)} to { } } /*箭头动画*/ .pt-arrow{ animation:moveUp 1.5s ease both infinite; } @keyframes moveUp { 0%{ transform:translateY(100%); opacity:0; } 50%{ transform:translateY(0%); opacity:1; } 100%{ transform:translateY(-100%); opacity:0; } } /*定义原抖动动画*/ .pg-moveCircle{ animation:moveCircle 1.5s ease both; } @keyframes moveCircle { 0%{ transform: translateY(-80%);opacity: 0.1;} 20%{ transform: translateY(-80%);opacity: 0.3;} 35%{ transform: translateY(10%);opacity: 0.8;} 60%{ transform: translateY(-5%);opacity: 0.8;} 65%{ transform: translateY(-2%);opacity: 0.8;} 70%{ transform: translateY(-1%);opacity: 0.9;} 75%{ transform: translateY(-0.5%);opacity: 0.95;} 80%{ transform: translateY(0%);opacity: 1;} 100%{ transform: translateY(0%);opacity: 1;} } /*定义缩放的动画*/ .pg-scaleUp{ animation:scaleUp 0.6s ease both; } @keyframes scaleUp { from{ transform: scale(0.4);} to{ } } /*定义翻转动画*/ .pg-turn{ animation:turn 0.6s ease both; transform-origin: 50% 50%; } @keyframes turn { from { transform:rotateY(90deg)} to{ } } -------------------- **布局css文件:** #container{ width:100%; height:100%; } .page{ width:100%; height:100%; position: absolute; } /*定义页面背景色*/ .page-1-1{ background-color:#083846; } .page-2-1{ background-color:#9261BF; } .page-2-2{ background-color:#9261BF; } /*定义隐藏类*/ .hide{ display:none; } /*定义层级*/ .page-current{ z-index:2; } /*禁止滑动默认事件*/ *{ touch-action: none; } .page-1-1 .img_1{ height:auto;; width:248px; position: absolute; top:1%; left:50%; margin-left:-124px; } .page-1-1 .img_2{ height: auto; width: 185px; position: absolute; top:62%; left: 50%; margin-left: -92px; } .page-2-1 .img_1{ height: auto; width: 158px; position: absolute; top: 2%; left: 50%; margin-left:-79px ; z-index:2; } .page-2-1 .img_2{ height: auto; width: 240px; position: absolute; top: 28%; left: 50%; margin-left:-120px ; } .page-2-1 .img_3{ height: auto; width: 241px; position: absolute; top: 36%; left: 50%; margin-left:-120px ; } .page-2-1 .img_4{ height: auto; width: 20px; position: absolute; top: 87%; left: 50%; margin-left:-10px ; } .page-2-1 .img_5{ height: auto; width: 142px; position: absolute; top: 82%; left: 50%; margin-left:-71px ; } .page-2-1 .img_7{ height: auto; width: 248px; position: absolute; top: 8%; left: 50%; margin-left:-124px ; } .page-2-2 .img_1 { height:auto; width:293px; position:absolute; left:50%; top:5%; margin-left:-146px; } .page-2-2 .img_2 { height:auto; width:260px; position:absolute; left:50%; top:75%; margin-left:-130px; } .page-2-2 .img_3 { height:auto; width:20px; position:absolute; left:50%; top:87%; margin-left:-10px; } .page-2-2 .img_6 { height:auto; width:25px; position:absolute; left:50%; top:92%; margin-left:-12px; } /*当以公共的样式*/ .common_img{ height: auto; width: 25px; position: absolute; top: 92%; left: 50%; margin-left:-12px; } -------------------- **主页面:** <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>do it</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/index.css"/> <link rel="stylesheet" href="css/animate.css"/> </head> <body> <div id="container"> <div class="page page-1-1 page-cuurent "> <img class="img_1 pg-moveFromTop" src="img/cover.png" alt=""/> <img class='img_2 pg-moveFromLeft' src="img/wording_cover.png" alt=""/> <img class="img_3 common_img pg-moveToTop pt-arrow"src="img/icon_up.png" alt=""/> </div> <div class="page page-2-1 hide"> <img class="img_1 hide pg-moveFromBottom" src="img/wording.png" /> <img class="img_2 hide pg-moveCircle" src="img/circle.png" /> <img class="img_3 hide pg-moveFromLeft" src="img/people.png" /> <img class="img_4 hide pg-scaleUp" src="img/dot1.png" /> <img class="img_5 hide pg-scaleUp" src="img/check_develop.png" /> <img class="img_6 hide common_img pt-arrow" src="img/icon_up.png" /> <img class="img_7 hide pg-scaleUp" src="img/floating_develop.png" /> </div> <div class="page page-2-2 hide"> <img class="img_1 hide pg-turn" src="img/introduction.png" /> <img class="img_2 hide pg-turn" src="img/btn_develop.png" /> <img class="img_3 hide pg-turn" src="img/dot2.png" /> <img class="img_6 hide common_img pt-arrow" src="img/icon_up.png" /> </div> </div> <script type='text/javascript' src='js/zepto.js'></script> <script type='text/javascript' src='js/touch.js'></script> <script type='text/javascript' src='js/index.js'></script> </body> </html>
还没有评论,来说两句吧...