JS實(shí)現(xiàn)滑動(dòng)門效果的方法詳解
本文實(shí)例講述了JS實(shí)現(xiàn)滑動(dòng)門效果的方法。分享給大家供大家參考,具體如下:
描述:鼠標(biāo)移動(dòng)到一副圖片上,會(huì)顯示該副圖片的全貌,而其他圖片會(huì)顯示概貌,效果圖如下:
一、沒有動(dòng)畫效果的運(yùn)動(dòng)
思路:
1.定好每張圖片的初始位置(第一張完全顯示,234只露出一部分)
2.計(jì)算每道門的移動(dòng)距離(即未顯露的部分)
3.綁定鼠標(biāo)滑過事件
window.onload=function(){ var box=document.getElementById("box"); var img=box.getElementsByTagName("img"); //單張圖片寬度 var imgWidth=img[0].offsetWidth; //露出的寬度 var exposeWidth=160; //設(shè)置容器總寬度 var boxWidth=imgWidth+exposeWidth*(img.length-1) box.style.width=boxWidth+"px"; //設(shè)置圖片初始位置 function setImgspos(){ for(var i=1,len=img.length;i<len;i++){ //len在for循環(huán)的初始化語句里先定義好,這樣就不需要每次都計(jì)算img的個(gè)數(shù)了,比for(var i=1;i<img.length;i++)性能高 img[i].style.left=imgWidth+exposeWidth*(i-1)+"px"; } } setImgspos(); //計(jì)算每道門打開時(shí)應(yīng)移動(dòng)的距離 var translate=imgWidth-exposeWidth; for(var i=0,len=img.length;i<len;i++){ (function(i){ //這里為什么需要匿名函數(shù)?(簡(jiǎn)單來說是函數(shù)變量作用域的問題)img[i].onmouseover=function(){}這個(gè)函數(shù)內(nèi)部使用了變量i,但是i沒有定義,于是向外查找,找到for循環(huán)里定義的i,點(diǎn)擊事件是for循環(huán)執(zhí)行完畢后才開始執(zhí)行的,即此時(shí)i=4,所以會(huì)報(bào)錯(cuò)img[i]沒有定義,這里加一層匿名函數(shù)相當(dāng)于閉包處理,i以形參的方式傳遞給內(nèi)層函數(shù) img[i].onmouseover=function(){ setImgspos(); //每次移上去先重置位置 for(var j=1;j<=i;j++){ //第二個(gè)循環(huán)體作用:可能會(huì)移多道門(比如放到第三道門上,二和三都要?jiǎng)?,不是只?dòng)三,另外第一道門永遠(yuǎn)不動(dòng)) img[j].style.left=parseInt(img[j].style.left)-translate+"px"; } }; })(i); //這個(gè)i是實(shí)參 } };
二、展開加速、收攏減速的運(yùn)動(dòng)
注意:設(shè)置每道門初始位置時(shí),不需要在寫一個(gè)function了,因?yàn)橐謩e寫打開和關(guān)閉動(dòng)畫,會(huì)造成一個(gè)卡頓,瞬間閃爍。
思路:
1.需要鼠標(biāo)滑過這道門的初始位置
2.需要鼠標(biāo)滑過這道門的結(jié)尾位置
3.需要一個(gè)速度和定時(shí)器來完成緩緩移動(dòng)的過程
window.onload=function(){ var box=document.getElementById("box"); var img=box.getElementsByTagName("img"); //單張圖片寬度 var imgWidth=img[0].offsetWidth; //露出的寬度 var exposeWidth=160; //設(shè)置容器總寬度 var boxWidth=imgWidth+exposeWidth*(img.length-1) box.style.width=boxWidth+"px"; //設(shè)置圖片初始位置 for(var i=1,len=img.length;i<len;i++){ img[i].pos=img[i].style.left=imgWidth+exposeWidth*(i-1)+"px"; } function openDoor(el,translate){ var begin=parseInt(el.pos); var end=begin-translate; var iSpeed=10; setTimeout(function(){ el.style.left=parseInt(el.style.left)-iSpeed+"px"; //為什么不用begin?每次的初始位置會(huì)變 iSpeed*=1.5; //沒有這句話就是勻速運(yùn)動(dòng) if(parseInt(el.style.left)<=end){ el.style.left=end+"px"; }else{ setTimeout(arguments.callee,25); //定時(shí)器有名字可以直接調(diào)用,沒名字,就用原生js方法arguments.callee } },25); }; function closeDoor(el,translate){ var begin=parseInt(el.pos)-translate; //關(guān)門默認(rèn)情況是張開的 var end=begin+translate; //這里可以直接寫var end=parseInt(el.pos); var iSpeed=100; setTimeout(function(){ el.style.left=parseInt(el.style.left)+iSpeed+"px"; //為什么不用begin?每次的初始位置會(huì)變 iSpeed=Math.ceil(iSpeed*0.7); //沒有這句話就是勻速運(yùn)動(dòng) if(parseInt(el.style.left)>=end){ el.style.left=end+"px"; }else{ setTimeout(arguments.callee,25); //定時(shí)器有名字可以直接調(diào)用,沒名字,就用原生js方法arguments.callee } },25); }; var translate=imgWidth-exposeWidth; for(var i=0,len=img.length;i<len;i++){ (function(i){ img[i].onmouseover=function(){ //開門 自己和自己左邊的全部循環(huán)到 for(var j=1;j<=i;j++){ openDoor(img[j],translate); } //關(guān)門 自己右邊的全部循環(huán)到 for(var j=i+1;j<img.length;j++){ closeDoor(img[j],translate); } }; })(i); } };
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- 簡(jiǎn)單通用的JS滑動(dòng)門代碼
- javascript 通用滑動(dòng)門tab類
- js通用滑動(dòng)門類
- JS+CSS實(shí)現(xiàn)簡(jiǎn)單滑動(dòng)門(滑動(dòng)菜單)效果
- JS+CSS實(shí)現(xiàn)簡(jiǎn)易的滑動(dòng)門效果代碼
- 一個(gè)js實(shí)現(xiàn)的所謂的滑動(dòng)門
- JS+CSS實(shí)現(xiàn)自動(dòng)切換的網(wǎng)頁滑動(dòng)門菜單效果代碼
- JS仿淘寶實(shí)現(xiàn)的簡(jiǎn)單滑動(dòng)門效果代碼
- JS實(shí)現(xiàn)的簡(jiǎn)潔縱向滑動(dòng)菜單(滑動(dòng)門)效果
- JavaScript實(shí)現(xiàn)滑動(dòng)門效果
相關(guān)文章
微信公眾平臺(tái)API錯(cuò)誤代碼41002的問題解決辦法
今天在研究微信公眾號(hào)接口問題,下面這篇文章主要給大家介紹了關(guān)于微信公眾平臺(tái)API錯(cuò)誤代碼41002問題的解決辦法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09JavaScript獲取兩個(gè)數(shù)組交集的方法
這篇文章主要介紹了JavaScript獲取兩個(gè)數(shù)組交集的方法,涉及javascript針對(duì)數(shù)組的相關(guān)操作技巧,需要的朋友可以參考下2015-06-06JS實(shí)現(xiàn)圖片垂直居中顯示小結(jié)
本文給大家分享了4中圖片垂直居中顯示的效果,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-12-12關(guān)于layui flow loading占位圖的實(shí)現(xiàn)方法
今天小編就為大家分享一篇關(guān)于layui flow loading占位圖的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09jquery方法+js一般方法+js面向?qū)ο蠓椒▽?shí)現(xiàn)拖拽效果
多種方法制作的div拖拽,簡(jiǎn)單實(shí)用,包括了jquery方法、js一般方法、js面向?qū)ο蠓椒?/div> 2012-08-08最新評(píng)論