//以下是老師封裝的函數，其余的css代碼自己寫就好了

function startMove(obj,json,fn) {

/*

obj為要改變的元素對象

json為屬性/值對，即要改變的屬性和值。用于同步運動

fn為回調函數，用于設置鏈式運動

*/

// 首先清除定時器

clearInterval(obj.timer);

obj.timer=setInterval(function(){

flag=true;

//對于同時改變元素多個屬性值的情況

for(var attr in json)

{

//獲取屬性值

var icur=0;? ?//初始化屬性值為0

if(attr=="opacity")

{

//獲取的透明度為小數（0-1），首先轉化為百分制（0-100），然后四舍五入取整

icur=Math.round(parseFloat(getStyle(obj,attr))*100);

}else{

icur=parseInt(getStyle(obj,attr));

}

// 判斷所有屬性值是否都達到目標值，一個未達到，即為false

if(icur!=json[attr])

{

flag=false;

}

//設置屬性改變的速度

var speed=0;

speed=(json[attr]-icur)/4;? ?//4為參數，可為任意值，越小改變速度越快

speed=speed>0?Math.ceil(speed):Math.floor(speed);? //取整

//改變屬性值

if(attr=="opacity")

{

obj.style.filter="alpha(opacity:"+(icur+speed)+")";

obj.style.opacity=(icur+speed)/100;

}else{

obj.style[attr]=icur+speed+"px";

}

}

//待改變的屬性值同時完成一次改變后，判斷是否都達到目標值

if(flag)

{

clearInterval(obj.timer);

// 如果存在回調函數，則調用之

if(fn)

{

fn();

}

}

},30)?

}

// 獲取css樣式

function getStyle(obj,attr) {

if(obj.currentStyle)

{

return obj.currentStyle[attr];? ?//IE8

}else{

return getComputedStyle(obj,false)[attr];? //IE 9 10 11支持? 別人測試

}

}