純JS實(shí)現(xiàn)可用于頁(yè)碼更換的飛頁(yè)特效示例
本文實(shí)例講述了純JS實(shí)現(xiàn)可用于頁(yè)碼更換的飛頁(yè)特效。分享給大家供大家參考,具體如下:
這個(gè)效果使用了自己封裝的一個(gè)運(yùn)動(dòng)函數(shù);這個(gè)效果的巧妙之處在于,在開(kāi)始用數(shù)組存放了每個(gè)li的位置信息,然后在點(diǎn)擊按鈕(頁(yè)碼)的時(shí)候讓li的寬高位置和透明度發(fā)生運(yùn)動(dòng)的改變一個(gè)一個(gè)的消失,然后在消失結(jié)束之后,再一個(gè)個(gè)倒著出現(xiàn);可以和頁(yè)碼進(jìn)行匹配,從而實(shí)現(xiàn)頁(yè)碼更換的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.dbjr.com.cn 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; //用數(shù)組來(lái)存放沒(méi)個(gè)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; } //當(dāng)點(diǎn)擊的時(shí)候開(kāi)定時(shí)器,讓li一個(gè)一個(gè)的走 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">飛頁(yè)效果</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>
運(yùn)動(dòng)函數(shù)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); }
運(yùn)行效果如下:
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- js實(shí)現(xiàn)下一頁(yè)頁(yè)碼效果
- javascript分頁(yè)代碼(當(dāng)前頁(yè)碼居中)
- 某頁(yè)碼顯示的helper 少量調(diào)整,另附j(luò)s版
- javascript 支持頁(yè)碼格式的分頁(yè)類(lèi)
- 原生js和jquery實(shí)現(xiàn)圖片輪播特效
- javascript結(jié)合CSS實(shí)現(xiàn)蘋(píng)果開(kāi)關(guān)按鈕特效
- js實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)特效
- 一個(gè)簡(jiǎn)單的JS鼠標(biāo)懸停特效具體方法
- js文字橫向滾動(dòng)特效
- js實(shí)現(xiàn)文字閃爍特效的方法
- 23個(gè)Javascript彈出窗口特效整理
- 兼容多瀏覽器的字幕特效Marquee的通用js類(lèi)
相關(guān)文章
javascript實(shí)現(xiàn)fetch請(qǐng)求返回的統(tǒng)一攔截
這篇文章主要介紹了javascript實(shí)現(xiàn)fetch請(qǐng)求返回的統(tǒng)一攔截,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12JavaScript 身份證號(hào)有效驗(yàn)證詳解及實(shí)例代碼
這篇文章主要介紹了JavaScript 身份證號(hào)有效驗(yàn)證詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10JavaScript利用時(shí)間分片實(shí)現(xiàn)高性能渲染數(shù)據(jù)詳解
為了豐富我們的知識(shí)體系,我們有必要了解并清楚當(dāng)遇到大量數(shù)據(jù)時(shí),如何才能在不卡主頁(yè)面的情況下渲染數(shù)據(jù),以及其中背后的原理,本文介紹了如何使用時(shí)間分片的方式來(lái)渲染大量數(shù)據(jù),感興趣的可以了解下2023-05-05BootStrap 智能表單實(shí)戰(zhàn)系列(二)BootStrap支持的類(lèi)型簡(jiǎn)介
這篇文章主要介紹了BootStrap 智能表單實(shí)戰(zhàn)系列(二)BootStrap支持的類(lèi)型簡(jiǎn)介 的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-06-06javascript使用正則表達(dá)式實(shí)現(xiàn)去掉空格之后的字符
這篇文章主要介紹了javascript使用正則表達(dá)式實(shí)現(xiàn)去掉空格之后的字符的方法,需要的朋友可以參考下2015-02-02JScript中的"this"關(guān)鍵字使用方式補(bǔ)充材料
JScript中的"this"關(guān)鍵字使用方式補(bǔ)充材料...2007-03-03基于Bootstrap實(shí)現(xiàn)Material Design風(fēng)格表單插件 附源碼下載
Jquery Material Form Plugin是一款基于Bootstrap的Material Design風(fēng)格的jQuery表單插件。這篇文章主要介紹了基于Bootstrap的Material Design風(fēng)格表單插件附源碼下載,感興趣的朋友參考下2016-04-04bootstrap+jQuery實(shí)現(xiàn)的動(dòng)態(tài)進(jìn)度條功能示例
這篇文章主要介紹了bootstrap+jQuery實(shí)現(xiàn)的動(dòng)態(tài)進(jìn)度條功能,結(jié)合完整實(shí)例形式分析了bootstrap+jQuery實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-05-05JS獲取圖片實(shí)際寬高及根據(jù)圖片大小進(jìn)行自適應(yīng)
圖片實(shí)際寬高使用js進(jìn)行獲取以及根據(jù)圖片大小進(jìn)行自適應(yīng),此功能個(gè)人感覺(jué)比較實(shí)用,在此貢獻(xiàn)出來(lái),希望對(duì)大家有所幫助2013-08-08