原生javascript運(yùn)動(dòng)函數(shù)的封裝示例【勻速、拋物線、多屬性的運(yùn)動(dòng)等】
本文實(shí)例講述了原生javascript運(yùn)動(dòng)函數(shù)的封裝。分享給大家供大家參考,具體如下:
//封裝勻速運(yùn)動(dòng) //參數(shù): // 1、dom對(duì)象 // 2、樣式屬性(top,left,width,height,opacity等等) // 3、起始位置,結(jié)束位置 // 4、速度:時(shí)間間隔,步長(zhǎng) // 5、方向: //返回值 function moveObj(domObj,attr,startValue,endValue,timeSpace,step,direction) { let currValue = startValue; let myTimer = setInterval(function(){ //1、改變數(shù)據(jù) currValue = currValue+direction*step; //2、判斷邊界 // if(currValue>=endValue){//?? // currValue = endValue;//?? // window.clearInterval(myTimer); // } if(Math.abs(currValue-endValue)<step){ currValue = endValue; window.clearInterval(myTimer); } //3、改變外觀 if(attr=="opacity"){ domObj.style[attr] = currValue; }else{ domObj.style[attr] = currValue+"px"; } },timeSpace); } //封裝勻速運(yùn)動(dòng) //參數(shù): // 1、dom對(duì)象 // 2、樣式屬性(top,left,width,height,opacity等等) // 3、結(jié)束位置 // 4、時(shí)長(zhǎng): //返回值 function moveObj02(domObj,attr,endValue,timeLong) { let startValue = parseFloat(getStyle(domObj,attr));//?? let direction= endValue-startValue>0?1:-1;//?? let timeSpace = 10; let step = Math.abs(endValue-startValue)/(timeLong/timeSpace) // endValue-startValue/步子數(shù);// let currValue = startValue; let myTimer = setInterval(function(){ //1、改變數(shù)據(jù) currValue = currValue+direction*step; //2、判斷邊界 if(Math.abs(currValue-endValue)<step){ currValue = endValue; window.clearInterval(myTimer); } //3、改變外觀 if(attr=="opacity"){ domObj.style[attr] = currValue; }else{ domObj.style[attr] = currValue+"px"; } },timeSpace); } //封裝拋物線運(yùn)動(dòng)(右開口為例) //參數(shù): // dom對(duì)象 // 起點(diǎn) // 終點(diǎn) // 總時(shí)長(zhǎng) // //返回值:無 function parabola(domObj,startPoint,endPoint,timeLong,func){ //一、初始化 let offsetX = endPoint.x-startPoint.x; let offsetY = endPoint.y-startPoint.y; let p = (offsetY*offsetY)/(2*offsetX); let left1 = 0; domObj.style.left = startPoint.x+"px"; domObj.style.top = startPoint.y+"px"; let timeSpace = 10; let step = Math.abs(endPoint.x-startPoint.x)/(timeLong/timeSpace) // endValue-startValue/步子數(shù);// //二、啟動(dòng)定時(shí)器 let myTimer = setInterval(function(){ //1、改變數(shù)據(jù) left1=left1+step; let top1=Math.sqrt(2*p*left1); //2、判斷邊界 if(left1>=offsetX){ left1 = offsetX; top1=Math.sqrt(2*p*left1); window.clearInterval(myTimer); if(func){ func(); } } //3、改變外觀 domObj.style.left = left1+startPoint.x+"px"; domObj.style.top = top1+startPoint.y+"px"; },timeSpace); } //淡入: //參數(shù): // dom對(duì)象 // 時(shí)長(zhǎng); //返回值:無 function fadeIn(domObj,timeLong){ domObj.style.opacity = 0; moveObj02(domObj,"opacity",1,timeLong); } //淡出: //參數(shù): // dom對(duì)象 // 時(shí)長(zhǎng); //返回值:無 function fadeOut(domObj,timeLong){ domObj.style.opacity = 1; moveObj02(domObj,"opacity",0,timeLong); } //淡入和淡出: //參數(shù): // domObjIn:淡入的dom對(duì)象 // domObjOut:淡出的dom對(duì)象 // 時(shí)長(zhǎng); //返回值:無 function fadeInOut(domObjIn,domObjOut,timeLong,func){ domObjIn.style.opacity = 0; domObjOut.style.opacity = 1; let startValue = 0; let endValue = 1; let direction= 1; let timeSpace = 10; let step = Math.abs(endValue-startValue)/(timeLong/timeSpace) // endValue-startValue/步子數(shù);// let currValue = startValue; let myTimer = setInterval(function(){ //1、改變數(shù)據(jù) currValue = currValue+direction*step; //2、判斷邊界 if(Math.abs(currValue-endValue)<step){ currValue = endValue; window.clearInterval(myTimer); func&&func(); } //3、改變外觀 domObjIn.style.opacity = currValue; domObjOut.style.opacity = 1-currValue; },timeSpace); } //多屬性的運(yùn)動(dòng) //參數(shù): // 1、dom對(duì)象 // 2、每個(gè)樣式屬性的結(jié)束值 // 4、時(shí)長(zhǎng): //返回值 //調(diào)用示例: /* animate($("box"),{ "width":600, "height":400, "left":50 },2000) */ function animate(domObj,endObj,timeLong) { // let startValue = parseFloat(getStyle(domObj,attr));//?? let startObj = {} for(let key in endObj){ startObj[key] = parseFloat(getStyle(domObj,key)); } // let direction= endValue-startValue>0?1:-1;//?? let directionObj = {}; for(let key in endObj){ directionObj[key] = endObj[key]>startObj[key]?1:-1; } let timeSpace = 10; // let step = Math.abs(endValue-startValue)/(timeLong/timeSpace) // endValue-startValue/步子數(shù);// let stepObj = {}; for(let key in endObj){ stepObj[key] = Math.abs(endObj[key]-startObj[key] )/(timeLong/timeSpace); } //let currValue = startValue; let currObj = {}; for(let key in endObj){ currObj[key] = startObj[key]; } let myTimer = setInterval(function(){ //1、改變數(shù)據(jù) //currValue = currValue+direction*step; for(let key in endObj){ currObj[key] = currObj[key]+directionObj[key]*stepObj[key]; } //2、判斷邊界 let firstKey = Object.keys(endObj)[0]; if(Math.abs(currObj[firstKey]-endObj[firstKey])<stepObj[firstKey]){ for(let key in endObj){ currObj[key] = endObj[key]; } window.clearInterval(myTimer); } //3、改變外觀 for(let key in endObj){ if(key=="opacity"){ domObj.style[key] = currObj[key]; }else{ domObj.style[key] = currObj[key]+"px"; } } },timeSpace); }
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《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ì)有所幫助。
相關(guān)文章
javascript二維數(shù)組和對(duì)象的深拷貝與淺拷貝實(shí)例分析
這篇文章主要介紹了javascript二維數(shù)組和對(duì)象的深拷貝與淺拷貝,結(jié)合實(shí)例形式分析了JavaScript針對(duì)數(shù)組與對(duì)象的深拷貝及淺拷貝相關(guān)操作技巧,需要的朋友可以參考下2019-10-10javascript實(shí)現(xiàn)仿騰訊游戲選擇
這篇文章主要介紹了javascript實(shí)現(xiàn)仿騰訊游戲選擇,簡(jiǎn)單實(shí)現(xiàn)的下拉菜單二級(jí)聯(lián)動(dòng)效果,十分不錯(cuò),有需要的小伙伴可以參考下。2015-05-05jsonp跨域及實(shí)現(xiàn)百度首頁(yè)聯(lián)想功能的方法
這篇文章主要介紹了jsonp跨域及實(shí)現(xiàn)百度首頁(yè)聯(lián)想功能的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08Knockoutjs 學(xué)習(xí)系列(二)花式捆綁
這篇文章主要介紹了Knockoutjs 學(xué)習(xí)系列(二)花式捆綁 的相關(guān)資料,主要介紹了knockoutjs中各種綁定的使用方法,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06JavaScript中誤用/g導(dǎo)致的正則test()無法正確重復(fù)執(zhí)行的解決方案
這篇文章主要介紹了JavaScript中誤用/g導(dǎo)致的正則test()無法正確重復(fù)執(zhí)行的解決方案的相關(guān)資料,需要的朋友可以參考下2016-07-07利用momentJs做一個(gè)倒計(jì)時(shí)組件(實(shí)例代碼)
這篇文章主要介紹了利用momentJs做一個(gè)倒計(jì)時(shí)組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12