纯JS实现可用于页码更换的飞页特效示例

2020-11-27 来源：趣尚旅游网

本文实例讲述了纯JS实现可用于页码更换的飞页特效。分享给大家供大家参考，具体如下：

这个效果使用了自己封装的一个运动函数；这个效果的巧妙之处在于，在开始用数组存放了每个li的位置信息，然后在点击按钮（页码）的时候让li的宽高位置和透明度发生运动的改变一个一个的消失，然后在消失结束之后，再一个个倒着出现；可以和页码进行匹配，从而实现页码更换的效果

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.gxlcms.com JS飞入效果</title>
 <link rel="stylesheet" href="stylesheets/base.css" rel="external nofollow" >
 <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>

运动函数move.js：

/**
 * 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);
}

运行效果如下：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

显示全文

全部栏目

纯JS实现可用于页码更换的飞页特效示例