快捷導(dǎo)航

javascript與CSS復(fù)習(xí)(二)

更新時間：2010年06月29日 02:00:11 作者：

我們接下來討論元素的可見性，CSS有兩種不同的方式可以有效的隱藏元素，它們有各自的特點，會導(dǎo)致不同的結(jié)果。

visibility：在切換元素可見性的同時會保持元素在普通流中的位置和空間。它有兩個值：visible（默認的）和hidden（不可見的），
例如：

<p>Hello <b>John</b>, how are you today?</p>

瀏覽器中是：Hello John, how are you today? 接著我們把John所在b的visibility設(shè)置為hidden后，就會變成這樣
Hello , how are you today?
display:為我們控制元素的布局提供了更豐富的選擇?？梢允莍nline、block或是none(它完全從文檔中隱藏了元素,結(jié)果跟從文檔中刪除了該元素的情形看起來一樣)。還是上面的例子，如果我們用了display:none。那么結(jié)果是
Hello , how are you today?
下面給出書中兩個簡單函數(shù)用于顯示和隱藏元素

復(fù)制代碼代碼如下:

//使用display隱藏元素 
function hide(elem) { 
//找出元素display的當前狀態(tài) 
var curDisplay = getStyle(elem, 'display'); 
//記錄它的display狀態(tài) 
if(curDisplay != 'none') 
elem.$oldDisplay = curDisplay; 
//設(shè)置display為none 
elem.style.display = 'none'; 
} 
//使用display顯示元素 
function show(elem) { 
//設(shè)置display屬性為它的原始值 
elem.style.display = elem.$oldDisplay || ' '; 
} 

接下來我們來研究下透明度opacity，這可以給元素添加一個很cool的效果...看下下面這個設(shè)置元素透明度的函數(shù)。

復(fù)制代碼代碼如下:

//設(shè)置元素的透明度(級別從0-100) 
function setOpacity(elem, level) { 
//如果存在filters這個屬性，則它是IE 
if(elem.filters) { 
elem.style.filters = 'alpha(opacity=' + level + ')'; 
} else { //否則,使用W3C的opacity屬性 
elem.style.opacity = level / 100; 
} 
} 

有了這些調(diào)整元素位置、尺寸和可見性的方法，我們就能把它們結(jié)合起來創(chuàng)建動畫。

復(fù)制代碼代碼如下:

function slideDown(elem) { 
//從0高度開始滑動 
elem.style.height = '0px'; 
//先顯示元素(但是看不到它，因為它的高度為0) 
show(elem); 
//找到元素的完整的潛在高度 
var h = fullHeight(elem); 
//我們在1秒鐘內(nèi)執(zhí)行一個20幀的動畫 
for(var i = 0; i <= 100; i += 5) { 
//保證我們能夠保持正確的'i'的閉包函數(shù) 
(function() { 
var pos = i; 
//設(shè)置timeout以讓它能在指定的時間點運動 
setTimeout(function() { 
//設(shè)置元素新的高度 
elem.style.height = (pos / 100) * h + 'px'; 
}, (pos + 1) * 10); 
})(); 
} 
} 

這里有個閉包的概念，理解起來可能有些難度，感興趣深入的園友可以去Google下，這里就不多討論了。
接下來用setOpacity函數(shù)寫個"漸顯"函數(shù)：

復(fù)制代碼代碼如下:

function fadeIn(elem) { 
//從0透明度開始 
setOpacity(elem, 0); 
//先顯示元素(但是看不到它,因為它的透明度是0) 
show(elem); 
//我們在1秒鐘內(nèi)執(zhí)行一個20幀的動畫 
for(var i = 0; i < 100; i += 5) { 
//保證我們能夠保持正確的'i'的閉包函數(shù) 
(function(){ 
var pos = i; 
//設(shè)置timeout以讓它能在指定的事件內(nèi)運行 
setTimeout(function() { 
setOpacity(elem, pos); 
}, (pos + 1) * 10); 
})(); 
} 
} 

為了代碼的正確性,我寫完后都去測試一下，因為發(fā)現(xiàn)書中會有些小錯誤,剛測試完上面的slideDown方法，應(yīng)該把var h = fullHeight(elem);放到函數(shù)內(nèi)容的第一句，不然沒效果....
第二部分的復(fù)習(xí)就到這里，慢慢消化，學(xué)東西可不能急于求成哦。

您可能感興趣的文章: