序言
今天給大家?guī)?lái)一個(gè)手風(fēng)琴效果的圖片，效果如下圖所示：
實(shí)現(xiàn)
我們來(lái)簡(jiǎn)單分析一下，這里一共有兩種效果，鼠標(biāo)移動(dòng)到某一列表項(xiàng)時(shí)，這個(gè)列表項(xiàng)會(huì)變大，里面的圖片和文字也會(huì)變大，所以這個(gè)地方我們得寫(xiě)兩套樣式用來(lái)切換，然后就是監(jiān)聽(tīng)鼠標(biāo)的事件了，總體來(lái)說(shuō)和之前寫(xiě)的 tabBar 功能也有點(diǎn)類(lèi)似，下面來(lái)看看 Html 代碼：
<div id="header" class="container">
<ul>
<li class="big">
<a>
<img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg" />
<div class="description">
<h3 style="color:#6f9400">聚美妝</h3>
<p>聚美妝1/2周年慶</p>
<p class="price"><strong>1</strong><i>折起</i></p>
</div>
<s class="line"></s>
<i class="mask"></i>
</a>
</li>
</ul>
</div>
這里我只是寫(xiě)了列表項(xiàng)中的其中一項(xiàng)，剩下的幾項(xiàng)復(fù)制粘貼一下就好了，接下來(lái)看看CSS的代碼：
.container {
width: 938px;
height: 128px;
margin: 0 auto;
border: 1px solid #cccccc;
}
.container li{
width: 156px;
height: 128px;
float: left;
overflow: hidden;
}
.container li a{
width: 156px;
height: 128px;
position: relative;
display: block;
overflow: hidden;
text-decoration: none;
}
.container li img{
height: 72px;
width: 117px;
position: absolute;
bottom: 0;
right: -15px;
}
.description {
width: 136px;
padding: 4px 10px;
position: absolute;
top: 0;
left: 0;
}
.description h3{
font-size: 14px;
font-weight: 700;
}
.description p{
color:#868686;
font-size: 12px;
height: 22px;
width: 136px;
overflow: hidden;
line-height: 22px;
}
.description .price {
font-size: 14px;
font-style: italic;
color: #fa2a5d;
height: 35px;
}
.container .line{
position: absolute;
right: 0;
width: 0;
border: 1px dashed #cacaca;
height: 128px;
}
.container .mask{
position: absolute;
top: 0;
left: 0;
height: 128px;
width: 156px;
background-color: #000;
opacity: 0;
}
.container:hover .mask {
opacity: 0.15;
}
/* 以下是變大之后的 */
.container li.big, li.big a{
width: 314px;
height: 128px;
}
.container li.big img {
width: 195px;
height: 120px;
right: 0;
bottom: 0;
}
.container li.big .description {
width: 290px;
}
.container li.big h3 {
font-size: 18px;
}
.container li.big .description p {
font-size: 14px;
width: 166px;
}
.container li.big p.price {
font-size: 16px;
padding-top: 7px;
}
.container li.big a:hover .mask{
opacity: 0;
}
.container li:hover{
width: 312px;
}
這里用到了一個(gè)新的布局，relative 相對(duì)定位布局，這個(gè)相對(duì)是相對(duì)于父布局的，可以設(shè)置 top，left，bottom，right是個(gè)方向上相對(duì)父布局的距離，然后再給子布局設(shè)置絕對(duì)定位布局，這樣的話(huà)就表示子布局只會(huì)跟著父布局改動(dòng)而改動(dòng)了。然后還有一個(gè)遮罩層的概念，就是給某個(gè)元素設(shè)置 opacity 屬性，這個(gè)的取值是0-1，一個(gè)透明度的變化，最后再來(lái)定義一個(gè) big 的樣式，就算完成了；那么我們?cè)趺唇o布局動(dòng)態(tài)的添加 class屬性呢，來(lái)看看 Js 的實(shí)現(xiàn)：
window.onload = function () {
var outer = document.getElementById('header');
var lis = outer.getElementsByTagName('li');
if (null != lis) {
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover = function () {
for(var j=0;j<lis.length;j++) {
var aa = lis[j]
aa.classList.remove('big')
}
this.classList.add('big');
}
}
}
}
首先，還是監(jiān)聽(tīng)鼠標(biāo)的移動(dòng)事件，然后將所有的列表項(xiàng) class='big' 的屬性給移除掉，然后再給當(dāng)前鼠標(biāo)移動(dòng)到的列表項(xiàng)設(shè)置 class='big' 屬性，這樣就達(dá)到了一個(gè)動(dòng)態(tài)更換 class 的效果。
