JavaScript 創(chuàng)建運(yùn)動(dòng)框架的實(shí)現(xiàn)代碼
封裝好的運(yùn)動(dòng)框架Move(obj,attr,iTarget),可直接調(diào)用:
可用于設(shè)置width、border、fontSize、marginLeft、opacity等許多常見屬性值的變速變化,實(shí)現(xiàn)各種有趣效果。
兼容IE和FF。
/****************
*
* IE-BUG:
* 在IE中,設(shè)置opacity屬性時(shí),元素樣式中需要設(shè)置opacity屬性,才能讀取到opacity值。
*
* obj:元素對(duì)象。 attr:用引號(hào)包圍的屬性名。 iTarget:屬性目標(biāo)值。
*
*****************/
function Move(obj,attr,iTarget){
clearInterval(obj.timer);//關(guān)閉前一個(gè)定時(shí)器,解決對(duì)同個(gè)對(duì)象同時(shí)調(diào)用多個(gè)Move()時(shí),定時(shí)器疊加問題。使用obj.timer給每個(gè)調(diào)用Move()的對(duì)象賦予各自的定時(shí)器,防止多個(gè)對(duì)象同時(shí)調(diào)用Move()時(shí),同用一個(gè)定時(shí)器,而導(dǎo)致相關(guān)干擾問題。
obj.timer=setInterval(function(){
var cur=0;//創(chuàng)建一個(gè)變量,用于存儲(chǔ) attr屬性每時(shí)每刻的值
if(attr=="opacity"){
//針對(duì)在FF中opacity屬性值為浮點(diǎn)數(shù)值問題,將屬性值 四舍五入、轉(zhuǎn)換成浮點(diǎn)型。乘以100,使opacity屬性值與IE統(tǒng)一為百分?jǐn)?shù)
cur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
cur=parseInt(getStyle(obj,attr));//將除opacity外的屬性(width/fontSize/MarginLeft等)的初始值 轉(zhuǎn)換為整型
}
var speed=(iTarget-cur)/10;//創(chuàng)建 遞減的速度speed變量。實(shí)現(xiàn)屬性值的變速改變
speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整,解決瀏覽器忽略小于1px的數(shù)值 導(dǎo)致運(yùn)動(dòng)結(jié)束時(shí),離目標(biāo)值Itarget少幾個(gè)像素的問題
if(iTarget==cur){//當(dāng)目標(biāo)值等于目標(biāo)值時(shí),結(jié)束定時(shí)器
clearInterval(obj.timer);
}else{
cur+=speed;//當(dāng)前值cur 加上 遞減的速度值speed
if(attr=="opacity"){
// 分別對(duì)IE和FF設(shè)置opacity屬性值
obj.style.filter="alpha(opacity:"+cur+")"; //for IE
obj.style.opacity=cur/100; //for FF
}else{
obj.style[attr]=cur+"px"; //給指定屬性attr 添加值cur+speed
}
}
},30);
}
//getStyle()函數(shù) 用于兼容IE和FF:獲取 對(duì)象的 非行間樣式中的屬性的值。 obj:元素對(duì)象。 name:屬性名。
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];//for IE
}else{
return getComputedStyle(obj,false)[name];//for FF
}
}
- Javascript 完美運(yùn)動(dòng)框架(逐行分析代碼,讓你輕松了運(yùn)動(dòng)的原理)
- js運(yùn)動(dòng)框架_包括圖片的淡入淡出效果
- JS運(yùn)動(dòng)框架之分享側(cè)邊欄動(dòng)畫實(shí)例
- 原生JS實(shí)現(xiàn)圖片無縫滾動(dòng)方法(附帶封裝的運(yùn)動(dòng)框架)
- 原生js封裝運(yùn)動(dòng)框架的示例講解
- JS運(yùn)動(dòng)特效之同時(shí)運(yùn)動(dòng)實(shí)現(xiàn)方法分析
- JS運(yùn)動(dòng)特效之鏈?zhǔn)竭\(yùn)動(dòng)分析
- JS運(yùn)動(dòng)特效之任意值添加運(yùn)動(dòng)的方法分析
- JS實(shí)現(xiàn)多物體運(yùn)動(dòng)的方法詳解
- JS運(yùn)動(dòng)改變單物體透明度的方法分析
- JS運(yùn)動(dòng)特效之完美運(yùn)動(dòng)框架實(shí)例分析
相關(guān)文章
JavaScript中的數(shù)據(jù)類型轉(zhuǎn)換方法小結(jié)
這篇文章主要介紹了JavaScript中的數(shù)據(jù)類型轉(zhuǎn)換方法,是JavaScript入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-10-10
JavaScript For Beginners(轉(zhuǎn)載)
JavaScript For Beginners(轉(zhuǎn)載)...2007-01-01
node.js入門教程迷你書、node.js入門web應(yīng)用開發(fā)完全示例
本書致力于教會(huì)你如何用Node.js來開發(fā)應(yīng)用,過程中會(huì)傳授你所有所需的“高級(jí)”JavaScript知識(shí)。本書絕不是一本“Hello World”的教程。2014-04-04
對(duì)JavaScript客戶端應(yīng)用編程的一些建議
這篇文章主要介紹了對(duì)JavaScript客戶端應(yīng)用編程的一些建議,主要針對(duì)MVC框架框架的一些相關(guān)使用問題,需要的朋友可以參考下2015-06-06
JavaScript前端圖片加載管理器imagepool使用詳解
這篇文章主要介紹了JavaScript前端圖片加載管理器imagepool使用詳解,需要的朋友可以參考下2014-12-12
前端?el-table?本地搜索的實(shí)現(xiàn)代碼
這篇文章主要介紹了前端?el-table?本地搜索的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-08
javascript設(shè)計(jì)模式之鴨子類型和多態(tài)
這篇文章主要為大家介紹了javascript鴨子類型和多態(tài),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助<BR>2022-01-01

