js多個物體運動功能實例分析
本文實例分析了js實現(xiàn)的多個物體運動功能。分享給大家供大家參考，具體如下：
與單個的區(qū)別：得知道哪個在動，所以運動函數(shù)需要兩個參數(shù)，出了目標iTarget之外，還要obj。另外需要多個計數(shù)器，否則當一個還沒運動完就移入另一個物體會發(fā)生卡殼
window.onload=function(){
var aDiv=document.getElementsByTagName("div");
var timer=null;
var i;
for(i=0;i<aDiv.length;i++){
aDiv[i].timer=null;
aDiv[i].onmouseover=function(){
startMove(this,300);
};
aDiv[i].onmouseout=function(){
startMove(this,100);
};
}
function startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var iSpeed=(iTarget-obj.offsetWidth)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //凡是要用緩沖運動，肯定缺不了取整，為了讓他能到目的點（不然無法完全貼合）
if(obj.offsetWidth==iTarget){
clearInterval(obj.timer);
}
else{
obj.style.width=obj.offsetWidth+iSpeed+'px';
}
},30);
};
};
注：多物體運動，所有東西都不能公用
屬性與運動對象綁定：速度、其他屬性值（如透明度等）
offsetWidth、offsetHeight、offsetLeft、offsetHeight都有一個bug，拿offsetWidth舉例，他除了width還包括padding和border，比如div寬度為100，還有一像素邊框，現(xiàn)在讓div運動，div.style.width=div.offsetWidth-1+'px'，沒有邊框的的情況下他會一直縮小直到消失，有邊框的情況。width:100px,offsetWidth:102px >>>>>width:101px,offsetWidth:103px，會使得他不斷變大
解決辦法：
用 currentStyle div.style.width=parseInt(getStyle(div,'width'))-1+'px' getStyle是自己封裝好的獲取樣式的函數(shù)，里面包括currentStyle方法。parseInt解析字符串返回整數(shù)。
擴展(任意值變化)：
用同一套運動框架使得一個物體變寬，一個變高，一一個透明度變化
window.onload=function(){
var aDiv=document.getElementsByTagName("div");
var timer=null;
aDiv[0].onmouseover=function(){
startMove(this,'width',300);
};
aDiv[0].onmouseout=function(){
startMove(this,'width',100);
};
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
};
function startMove(obj,attr,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var iCur=parseInt(getStyle(obj,attr));
var iSpeed=(iTarget-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //凡是要用緩沖運動，肯定缺不了取整，為了讓他能到目的點（不然無法完全貼合）
if(iCur==iTarget){
clearInterval(obj.timer);
}
else{
obj.style[attr]=iCur+iSpeed+'px';
}
},30);
};
};
這套運動框架還有個問題，透明度沒支持
1.
var iCur=parseInt(getStyle(obj,attr));
opacity取到的都是零點幾，parseInt取整，所以opacity永遠是0，應改為
if(attr=='opacity'){
var iCur=parseFloat(getStyle(obj,attr))*100; //為了其他程序不用修改，這里統(tǒng)一乘100
}
else{
var iCur=parseInt(getStyle(obj,attr));
}
2.
obj.style[attr]=iCur+iSpeed+'px';
按現(xiàn)在寫法就是
aDiv.style.opacity=50px;
應改為
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else{
obj.style[attr]=iCur+iSpeed+'px'
}
3.計算機內(nèi)部，都是模擬的來存儲小數(shù)，不是實際來存儲，最簡單的例子
alert(0.07*100); //輸出并不是7，而是7.0000...001，不止7，很多數(shù)字（小數(shù)）都有問題
所以var iCur=parseFloat(getStyle(obj,attr))*100;就會出問題（會閃爍），解決方法就是避免使用小數(shù)
var iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
這篇文章主要是用js實現(xiàn)拾色器效果，來自國外的網(wǎng)站，喜歡的朋友可以參考下2013-08-08
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)驗證碼倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
JavaScript中統(tǒng)計Textarea字數(shù)并提示還能輸入的字符
是在文本框中輸入文字的時候，會自動統(tǒng)計輸入的字符，并顯示用戶還能輸入的字符，其實js也可以實現(xiàn)，下面就以示例的方式為大家講解下2014-06-06
這篇文章主要為大家詳細介紹了javascript實現(xiàn)圖片預加載和懶加載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要為大家詳細介紹了微信小程序引入外部字體庫iconfont圖標的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要介紹了JS代碼實現(xiàn)百度地圖 畫圓 刪除標注的相關資料,實現(xiàn)此功能的設計思路非常明確，代碼簡單易懂，非常不錯，具有參考借鑒價值，感興趣的朋友參考下吧2016-10-10
這篇文章主要為大家詳細介紹了JS實現(xiàn)商品篩選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
JS.GetAllChild(element,deep,condition)使用介紹
JS.GetAllChild()獲取所有子節(jié)點，想必大家都知道吧，具體的使用方法如下，感興趣的朋友可以參考下2013-09-09
TypeScript中l(wèi)et和var的區(qū)別介紹
這篇文章主要介紹了TypeScript?let與var的區(qū)別,主要從作用域等這幾個方面做詳細介紹，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了bootstrap實現(xiàn)的自適應頁面簡單應用,結合具體實例形式分析了基于bootstrap的列表布局結構頁面實現(xiàn)與使用技巧,需要的朋友可以參考下2017-03-03