DOM程式設計藝術（動畫）

1、實現方式：

-gif

-flash

-css3

-js2、三要素：

*物件dom物件

*屬性*定時器

setinterval、settimeout、requestanimationframe

①setinterval

var intervalid = setinterval(func,delay[,param1,param2,...])

clearinterval(intervalid)

-----func 引數：執行改變屬性的操作

-----delay引數：觸發的時間間隔

②settimeout

var timeoutid = settimeout(func,[delay,param1,param2,...])

cleartimeout(timeoutid)

setinterva與settimeout的區別：

前乙個是每隔乙個時間間隔執行一次，後乙個是只執行一次。

③requestanimationframe

var requestid = requestanimationframe(func)

cancelanimationframe(requestid)

與前兩個定時器的區別：他的間隔時間是不由使用者去控制的，而是由顯示器的重新整理時間控制的。

3、常見動畫：

*形變*位移

*旋轉*透明度

。。。4、動畫函式

var animation = function(ele, attr, from, to)else

}ele.style[attr] = from + 'px';
var intervalid = setinterval(step, 10);
}

*進度條：

//使用setinterval

var process = function(prcsswrap, drtn, intrvl, callback)
var des = getnum(prcss.style.width) + offset;
if(des < width)else if(des == width)else
}//觸發定時器
var intervalid = setinterval(step, intrvl);
};//使用settimeout
var process = function(prcsswrap, drtn, intrvl, callback)
var des = getnum(prcss.style.width) + offset;
if(des < width) else if(des == width)else
}var timeoutid = settimeout(step, intrvl);
};//使用requestanimationframe
var process = function(prcsswrap, drtn, intrvl, callback)
var des = getnum(prcss.style.width) + offset;
if(des < width)else if(des == width)else
}var requestid = requestanimationframe(step);
};

//左右移動

var animation = function(ele, from, to, callback)else 
}var intervalid = setinterval(step, step);
};

DOM程式設計藝術 position屬性

position屬性的合法值有static fixed relative和absolue四種。static是position屬性的預設值，意思是有關元素將按照它們在標記裡出現的先後順序出現在瀏覽器視窗裡。relative的含義魚static相似，區別是position屬性等於relative的元素還...

讀dom程式設計藝術總結 操作dom元素

一.獲取元素節點三種方法 document.getelementbyid id1 document.getelementsbytagname 標籤的名字例如 ul 得到所有的標籤 html5新增的方法 document.getelementbyclassname id1 可以這樣封裝 functio...

DOM程式設計藝術（資料儲存）

一 cookie 瀏覽器中的cookie是乙個小型文字檔案。cookie是儲存在瀏覽器端的，但是大部分時候我們是在伺服器端對cookie進行設定。我們可以在http返回體中通過設定set cookie這個頭部來告訴瀏覽器這個cookie。1 乙個完整的cookie的構成 屬性名預設值 作用name ...