百葉窗效果（Jalousie）是互聯(lián)網(wǎng)頁面開發(fā)的熱門效果之一。這個動畫效果可以讓參觀者看到一個由水平條紋組成的網(wǎng)格，一部分被包含在另一部分中。常見用于圖片、文本等元素的隱藏和展開。 下面我們來學習如何實現(xiàn)這個效果。在html中，可以用ul和li標簽來創(chuàng)建一個列表，而且說百葉窗基礎(chǔ)就是基于這個列表來實現(xiàn)的，可以通過css改變列表樣式來實現(xiàn)百葉窗的效果。我們先創(chuàng)建一個基礎(chǔ)結(jié)構(gòu)的ul列表。

<ul class="jalousie">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

在css中，我們需要設(shè)置ul的寬度：每一個li的寬度相同，所以可以先把li的寬度先設(shè)置一下。

.jalousie li {
width: 14.28%;
height: 200px;
float: left;
overflow: hidden;
position: relative;
}

現(xiàn)在我們創(chuàng)建動畫效果，圖片可以在li標簽中，也可以為li標簽指定背景。動畫效果通過JavaScript實現(xiàn)，Js用addEventListener來監(jiān)聽事件，當事件觸發(fā)時，執(zhí)行一個函數(shù)來改變樣式。

.jalousie li:hover {
width: 25%;
}
var jalousie = document.querySelector('.jalousie');
jalousie.addEventListener('mouseover', function(e) {
if (e.target && e.target.nodeName === 'LI') {
var lis = jalousie.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
lis[i].style.width = '10%';
}
e.target.style.width = '60%';
}
});

以上的代碼中，當鼠標懸停在li元素上時，改變其寬度使其變得更大，同時改變其他li元素的寬度使其變得更小。 這到達了非常的基本的效果，隨后可以繼續(xù)進行美化。可以為li元素添加漸進動畫，使其滑動而不是瞬間出現(xiàn)。也可以考慮添加鼠標釋放時的動畫效果，或是為li元素添加更多的樣式屬性。 通過JavaScript來實現(xiàn)百葉窗效果，可以實現(xiàn)相對較高的自定義性和動態(tài)性，同時也可以將動畫效果與其他JavaScript技術(shù)進行組合。這款效果簡單易用，非常適合展示大幅圖片或其他多媒體信息。