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

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

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' titlewww.jb51.net JS飞入效果/title link rel='样式表href='样式表/base . CSS“rel=”外部' nofollow '样式体{ background: # 000}。标题{宽度： 100%；高度： 40px背景# ffffont:bold 30px/40px '微软雅黑；文本对齐：居中；}输入{ background : # fffmargin-top :5 px；宽度： 50px高： 20pxfont : bold 12px/20px '微软雅黑；} ul { width : 360 pxh three : 360 pxmargin 336050 px汽车；} ul li {宽度： 100像素高度： 100像素；background : sky blueffloat : leftmargin :5 px }/style script src=' http : move。js '/脚本脚本窗口。onload=function(){ var OBtn=document。getelementbyid(' BTN 1 ')；var OUl=文档。getelementsbytagname(' ul ')[0]；var AlI=oUl.children//用数组来存放没个里的位置var arr=[]；//存位置for(var I=0；iali . lengthi){ arr[I]={ left : AlI[I].场外交易.offsetTop }；} //给目前的里定位for(var I=0；长度；I){ AlI[I]。风格。位置='绝对'；aLi[i].style.left=arr[i].左“px”；aLi[i].style.top=arr[i].顶部“px”；阿里[我]。风格。边距=0；} //当点击的时候开定时器，让里一个一个的走var Inow=0；定义变量计时器=nullvar BaSey=false奥宾。onclick=function(){ if(BabY){ return；} BabY=truetimer=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(计时器)；back()；面包屑=假；} Inow } })；},220);};function back(){ timer=setInterval(function(){ iNow-；移动(aLi[iNow]，{left:arr[iNow].左，顶部：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输入类型='按钮'值='走你id=' BTN 1 ' ul Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li/ul/body/html运动函数move.js:

/** *由伊阿宋于2016/11/7创建。*/函数getStyle(obj，sName){ return(obj。current style | | get computed style(obj，false))[SName]；}函数move(obj，json，options){ var options=options | | { }；var持续时间=选项。持续时间| | 1000；定义变量宽松=选项。宽松||"线性";var start={ }；var dis={ }；for(JSON中的名称){ start[name]=parseFloat(getStyle(obj，name))；dis[name]=JSON[name]-start[name]；}//开始{width:50，} dis { width :150 }//控制台。日志(开始，dis)；var count=Math.floor(持续时间/30);var n=0；clearInterval(obj。计时器)；物体。timer=SetInterval(function(){ n；for(JSON中的名称){ switch(easy){ case ' linear ' : var a=n/count；var cur=start[name]dis[name]* a；打破；案例"轻松“: var a=n/count；var cur=start[name]dis[name]* a * a * a；打破；病例"缓解" : var a=1-n/计数；var cur=start[name]dis[name]*(1-a * a * a)；打破；} if(name=='不透明度'){ obj。风格。不透明度=cur} else { obj。style[name]=cur ' px '；} } if(n==count){ clearInterval(obj。计时器)；选项。完整选项。完成()；} },30);}运行效果如下：

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

希望本文所述对大家Java脚本语言程序设计有所帮助。