// 多個(gè)屬性運(yùn)動(dòng)框架? 添加回調(diào)函數(shù)
functionanimate(obj,json,fn) {// 給誰? ? json
clearInterval(obj.timer);
obj.timer=setInterval(function() {
varflag= true;// 用來判斷是否停止定時(shí)器? 一定寫到遍歷的外面
for(varattrinjson){// attr? 屬性? ? json[attr]? 值
//開始遍歷 json
// 計(jì)算步長? ? 用 target 位置 減去當(dāng)前的位置? 除以 10
// console.log(attr);
varcurrent=0;
if(attr=="opacity")
{
current=Math.round(parseInt(getStyle(obj,attr)*100))||0;
console.log(current);
}
else
{
current=parseInt(getStyle(obj,attr));// 數(shù)值
}
// console.log(current);
// 目標(biāo)位置就是? 屬性值
varstep=(json[attr]-current)/10;// 步長? 用目標(biāo)位置 - 現(xiàn)在的位置 / 10
step=step>0?Math.ceil(step):Math.floor(step);
//判斷透明度
if(attr=="opacity")// 判斷用戶有沒有輸入 opacity
{
if("opacity"inobj.style)// 判斷 我們?yōu)g覽器是否支持opacity
{
// obj.style.opacity
obj.style.opacity=(current+step)/100;
}
else
{// obj.style.filter = alpha(opacity = 30)
obj.style.filter="alpha(opacity = "+(current+step)*10+")";
}
}
else if(attr=="zIndex")
{
obj.style.zIndex=json[attr];
}
else
{
obj.style[attr]=current+step+"px";
}
if(current!=json[attr])// 只要其中一個(gè)不滿足條件 就不應(yīng)該停止定時(shí)器? 這句一定遍歷里面
{
flag=? false;
}
}
if(flag)// 用于判斷定時(shí)器的條件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn)// 很簡單? 當(dāng)定時(shí)器停止了。 動(dòng)畫就結(jié)束了? 如果有回調(diào)，就應(yīng)該執(zhí)行回調(diào)
{
fn();// 函數(shù)名 +? （）? 調(diào)用函數(shù)? 執(zhí)行函數(shù)
}
}
},10)
}
functiongetStyle(obj,attr) {//? 誰的? ? ? 那個(gè)屬性
if(obj.currentStyle)// ie 等
{
returnobj.currentStyle[attr];// 返回傳遞過來的某個(gè)屬性
}
else
{
returnwindow.getComputedStyle(obj,null)[attr];// w3c 瀏覽器
}
}
這是本人在學(xué)習(xí)中寫的簡單的js動(dòng)效，為了自己更好的學(xué)習(xí)，從今天（2017/8/18）起，每天堅(jiān)持發(fā)布自己學(xué)到的一些東西，這也算是更好地督促自己在前端的路上越走越長吧，畢竟才剛開始，加油咯！Day01
