首頁>網頁設計教程>心得技巧

菜鳥跟我學緩衝效果

作者：Eve Cole 更新時間：2009-06-20 16:54:28

首先我要說的是,我是,這些文章是獻給和我一樣想要學習的們.論壇裡有幾位朋友發過緩衝效果,但是像我這種看他們的代碼實在是一種痛苦,因為不是一個層次的.所以我用最冗餘的代碼來寫出這種效果,目的就是希望們能看懂,當我們不菜的時候我們再回頭去看高手們的東西.最後,請相信這句話:
有一天也會成為高手,(前提是你要努力哈哈^^)

運行程式碼框

[Ctrl+A 全部選擇提示：你可先修改部分程式碼，再按執行]

關鍵程式碼請看這兩個就可以了：

function f_s(){
var obj=document.getElementById("box");//取得ID為box的對象
obj.style.display="block";//設定物件obj為顯示
obj.style.width="1px"; //設定物件obj的寬度為1px
var changeW=function(){ //(關於函數這一點，什麼閉包，什麼類、原型的，弄的我頭大了，以後慢慢理解吧。這裡我理解的是創建一個函數直接量並把它存進變數changeW裡)
var obj_w=parseInt(obj.style.width);//把物件的寬度轉換成一個數值，存入變數obj_w；
if(obj_w<600){ //判斷，如果寬度數值小於600
obj.style.width=(obj_w+Math.ceil((600-obj_w)/15))+"px";//計算物件的寬度。 。 。隨著寬度的變長，遞增量也越來越小
}
else{
clearInterval(bw);//如果大於等於600的話，不再執行setInterval,意思就是這個時候停止增加寬度了。
}
}
var bw=window.setInterval(changeW,1)//每0.001秒呼叫一次changeW
}
//slow to fast 由慢到快
//宣告一個函數s_f()
function s_f(){
var obj=document.getElementById("box2");
var e_add=1;//初始化遞增量
obj.style.display="block";
obj.style.width="1px";
var changeW=function(){//我理解的是建立一個函數直接量並把它存進變數changeW裡
var obj_w;e_add
obj_w=parseInt(obj.style.width);
e_add*=1.05;//以後每次遞增的值都是
if(obj_w<600){
obj.style.width=(obj_w+e_add)+"px";//隨著寬度的變長，遞增量越來越大
}
else{
clearInterval(bw);
obj.style.width="600px";//因為(obj_w+e_add)這種計算方法會超出預先定義的寬度,所以這裡在緩衝完以後重新設定它的寬度.造成一種假象哈哈
}
}
var bw=window.setInterval(changeW,1)
}