纯JS实现可用于页码更换的飞页特效示例
网络编程 2021-07-04 16:45www.168986.cn编程入门
这篇文章主要介绍了纯JS实现可用于页码更换的飞页特效,涉及javascript结合时间函数的数学运算与页面元素属性动态修改相关操作技巧,需要的朋友可以参考下
本文实例讲述了纯JS实现可用于页码更换的飞页特效。分享给大家供大家参考,具体如下
这个效果使用了自己封装的一个运动函数;这个效果的巧妙之处在于,在开始用数组存放了每个li的位置信息,然后在点击按钮(页码)的时候让li的宽高位置和透明度发生运动的改变一个一个的消失,然后在消失结束之后,再一个个倒着出现;可以和页码进行匹配,从而实现页码更换的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>.jb51. 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-: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, :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.=arr[i].+'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,:0,height:0,width:0,opacity:0},{'duration':200,'plete':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,:arr[iNow].,height:100,width:100,opacity:1},{'duration':200,'plete':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]aaa; break; case 'ease-out': var a=1-n/count; var cur=start[name]+dis[name](1-aaa); break; } if(name=='opacity'){ obj.style.opacity=cur; }else{ obj.style[name]=cur+'px'; } } if(n==count){ clearInterval(obj.timer); options.plete && options.plete(); } },30); }
运行效果如下
更多关于JavaScript相关内容感兴趣的读者可查看本站专题《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程