飞页效果，可以制作页码更换
Posted Jason齐齐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了飞页效果，可以制作页码更换相关的知识，希望对你有一定的参考价值。
这个效果使用了自己封装的一个运动函数；这个效果的巧妙之处在于，在开始用数组存放了每个li的位置信息，然后在点击按钮（页码）的时候让li的宽高位置和透明度发生运动的改变一个一个的消失，然后在消失结束之后，再一个个倒着出现；可以和页码进行匹配，从而实现页码更换的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="stylesheets/base.css"> <style> body{ background:#000; } .header{ width: 100%; height: 40px; background:#fff; font:bold 30px/40px ‘微软雅黑‘; text-align:center; } input{ background:#fff; margin-top:5px; width: 50px; height: 20px; font:bold 12px/20px ‘微软雅黑‘; } ul{ width: 360px; height: 360px; margin:50px auto; } ul li{ width: 100px; height: 100px; background:skyblue; float:left; margin:5px; } </style> <script src="move.js"></script> <script> window.onload=function(){ var oBtn=document.getElementById(‘btn1‘); var oUl=document.getElementsByTagName(‘ul‘)[0]; var aLi=oUl.children; //用数组来存放没个li的位置 var arr=[]; //存位置 for(var i=0;i<aLi.length;i++) { arr[i] = { left:aLi[i].offsetLeft, top:aLi[i].offsetTop }; } //给目前的li定位 for(var i=0;i<arr.length;i++){ aLi[i].style.position=‘absolute‘; aLi[i].style.left=arr[i].left+‘px‘; aLi[i].style.top=arr[i].top+‘px‘; aLi[i].style.margin=0; } //当点击的时候开定时器，让li一个一个的走 var iNow=0; var timer=null; var bReady=false; oBtn.onclick=function(){ if(bReady){return;} bReady=true; timer=setInterval(function(){ move(aLi[iNow],{left:0,top:0,height:0,width:0,opacity:0},{‘duration‘:200,‘complete‘:function(){ if(iNow==arr.length-1){ clearInterval(timer); back(); bReady=false; } iNow++; }}); },220); }; function back(){ timer=setInterval(function(){ iNow--; move(aLi[iNow],{left:arr[iNow].left,top:arr[iNow].top,height:100,width:100,opacity:1},{‘duration‘:200,‘complete‘:function(){ if(iNow==0){ clearInterval(timer); } }}); },220); } }; </script> </head> <body> <div class="header">飞页效果</div> <input type="button" value="走你" id="btn1"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
运动函数
/**
* Created by Jason on 2016/11/7.
*/
function getStyle(obj,sName){
return (obj.currentStyle || getComputedStyle(obj,false))[sName];
}
function move(obj,json,options){
var options=options || {};
var duration=options.duration || 1000;
var easing=options.easing || ‘linear‘;
var start={};
var dis={};
for(name in json){
start[name]=parseFloat(getStyle(obj,name));
dis[name]=json[name]-start[name];
}
//start {width:50,} dis {width:150}
//console.log(start,dis);
var count=Math.floor(duration/30);
var n=0;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
n++;
for(name in json){
switch (easing){
case ‘linear‘:
var a=n/count;
var cur=start[name]+dis[name]*a;
break;
case ‘ease-in‘:
var a=n/count;
var cur=start[name]+dis[name]*a*a*a;
break;
case ‘ease-out‘:
var a=1-n/count;
var cur=start[name]+dis[name]*(1-a*a*a);
break;
}
if(name==‘opacity‘){
obj.style.opacity=cur;
}else{
obj.style[name]=cur+‘px‘;
}
}
if(n==count){
clearInterval(obj.timer);
options.complete && options.complete();
}
},30);
}
以上是关于飞页效果，可以制作页码更换的主要内容，如果未能解决你的问题，请参考以下文章
IOS - UIPageViewController 使用页面卷曲效果转到上一页并在每个页面上显示页码