|
|
例如：
復(fù)制代碼 代碼如下: <p>Hello <b>John</b>, how are you today?</p>
瀏覽器中是：Hello John, how are you today? 接著我們把John所在b的visibility設(shè)置為hidden后，就會(huì)變成這樣
Hello , how are you today?
display:為我們控制元素的布局提供了更豐富的選擇。可以是inline、block或是none(它完全從文檔中隱藏了元素,結(jié)果跟從文檔中刪除了該元素的情形看起來(lái)一樣)。還是上面的例子，如果我們用了display:none。那么結(jié)果是
Hello , how are you today?
下面給出書中兩個(gè)簡(jiǎn)單函數(shù)用于顯示和隱藏元素
復(fù)制代碼 代碼如下://使用display隱藏元素
function hide(elem) {
//找出元素display的當(dāng)前狀態(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 || ' ';
}
接下來(lái)我們來(lái)研究下透明度opacity，這可以給元素添加一個(gè)很cool的效果...看下下面這個(gè)設(shè)置元素透明度的函數(shù)。
復(fù)制代碼 代碼如下://設(shè)置元素的透明度(級(jí)別從0-100)
function setOpacity(elem, level) {
//如果存在filters這個(gè)屬性，則它是IE
if(elem.filters) {
elem.style.filters = 'alpha(opacity=' + level + ')';
} else { //否則,使用W3C的opacity屬性
elem.style.opacity = level / 100;
}
}
有了這些調(diào)整元素位置、尺寸和可見性的方法，我們就能把它們結(jié)合起來(lái)創(chuàng)建動(dòng)畫。
復(fù)制代碼 代碼如下:function slideDown(elem) {
//從0高度開始滑動(dòng)
elem.style.height = '0px';
//先顯示元素(但是看不到它，因?yàn)樗母叨葹?)
show(elem);
//找到元素的完整的潛在高度
var h = fullHeight(elem);
//我們?cè)?秒鐘內(nèi)執(zhí)行一個(gè)20幀的動(dòng)畫
for(var i = 0; i <= 100; i += 5) {
//保證我們能夠保持正確的'i'的閉包函數(shù)
(function() {
var pos = i;
//設(shè)置timeout以讓它能在指定的時(shí)間點(diǎn)運(yùn)動(dòng)
setTimeout(function() {
//設(shè)置元素新的高度
elem.style.height = (pos / 100) * h + 'px';
}, (pos + 1) * 10);
})();
}
}
這里有個(gè)閉包的概念，理解起來(lái)可能有些難度，感興趣深入的園友可以去Google下，這里就不多討論了。
接下來(lái)用setOpacity函數(shù)寫個(gè)"漸顯"函數(shù)：
復(fù)制代碼 代碼如下:function fadeIn(elem) {
//從0透明度開始
setOpacity(elem, 0);
//先顯示元素(但是看不到它,因?yàn)樗耐该鞫仁?)
show(elem);
//我們?cè)?秒鐘內(nèi)執(zhí)行一個(gè)20幀的動(dòng)畫
for(var i = 0; i < 100; i += 5) {
//保證我們能夠保持正確的'i'的閉包函數(shù)
(function(){
var pos = i;
//設(shè)置timeout以讓它能在指定的事件內(nèi)運(yùn)行
setTimeout(function() {
setOpacity(elem, pos);
}, (pos + 1) * 10);
})();
}
}
為了代碼的正確性,我寫完后都去測(cè)試一下，因?yàn)榘l(fā)現(xiàn)書中會(huì)有些小錯(cuò)誤,剛測(cè)試完上面的slideDown方法，應(yīng)該把var h = fullHeight(elem);放到函數(shù)內(nèi)容的第一句，不然沒效果....
第二部分的復(fù)習(xí)就到這里，慢慢消化，學(xué)東西可不能急于求成哦。
JavaScript技術(shù)：javascript與CSS復(fù)習(xí)(二)，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
