【学习笔记+实践】手风琴效果

步骤：

1、用无序列表的浮动布局实现图片并排效果；

2、通过相对定位和绝对定位实现遮罩层、文字层、虚线等的定位效果；

3、通过设置遮罩层的透明度来改变某个元素的明暗度，用伪类实现鼠标悬停时阴影的控制；

4、用javascript直接控制属性大小或者css3的transition 实现变化平滑过渡的动画效果；

5、用js监听鼠标事件onmouseover，通过修改元素的class值实现最终效果（循环 / 事件委托）。

关键：

1、n个列表项总宽度 = （n-1）*列表项宽度 + 1*展开的列表项宽度

2、虚线的实现方法：由于只需要虚线边框的效果，故该元素的宽度为0。

.line { position:absolute; right:-1px; width:0px; height:150px; border:1px dashed #ccc;}

3、遮罩层：元素的明暗度是控制遮罩层的透明度实现的。

.mask { position:absolute; top:0px; left:0px; width:180px; height:150px; background:#000; opacity:0;}

4、鼠标悬停的列表项不需要遮罩层：#accordion li a.on .mask { opacity:0;}

 // 用伪类实现鼠标悬停时阴影的控制：#accordion:hover .mask { opacity:0.35;}

5、用css3的transition属性实现平滑过渡：#accordion li * { transition: all linear 100ms;}

6、在标准浏览器与IE浏览器下，绑定事件的区别：

标准浏览器：addEventListener(事件类型, 处理函数)

IE浏览器：attachEvent(事件类型, 处理函数, 使用捕获)

7、清空所有a元素的class：for(var i = 0,len = aA.length; i < len; i++){    aA[i].className = ''; }

8、根据事件的冒泡原理，找到需要变更class的“target”a元素。

while(target.nodeName.toLowerCase() != 'a' && target.nodeName.toLowerCase() != 'body'){

    target = target.parentNode;    }

8、通过改变<li>的className实现最终效果：target.className = 'on';

9、关于元素的显示和隐藏：

overflow:hidden——超出的部分隐藏；

overflow:visible——超出的部分显示；

display:none——隐藏元素；

visibility:hidden——视觉隐藏元素。

代码：

     
     




     
     


     
     



     
     

		
		我是1.png
		
		
	

		
		我是2.png
		
		
	

		
		我是3.png
		
		
	

		
		我是4.png
		
		
	

		
		我是5.png
		
	


/*手风琴效果css部分*/
body,ul,li,a,img { margin:0;padding:0;}
ul { list-style:none;}

#accordion { margin:50px auto; width:920px; height:150px; border:1px solid #ccc;}
#accordion li { float:left;overflow:hidden;}
#accordion li a { display:block; width:180px; height:150px;position:relative;}
#accordion li a img { position:absolute; right:-15px; bottom:0px; width:160px; height:120px;}
#accordion li a span { position:absolute; top:5px; left:5px; font-family:"微软雅黑" Verdana; font-size:12px; line-height:20px; color:#ccc;}
#accordion li a .mask { position:absolute; top:0px; left:0px; width:180px; height:150px; background:#000; opacity:0;}
#accordion li a .line { position:absolute; right:-1px; width:0px; height:150px; border:1px dashed #ccc;}

#accordion:hover .mask { opacity:0.35;}
#accordion li * { transition: all linear 100ms;}    /*让所有的变化都过渡得平滑些*/

#accordion li a.on{ width:200px;}
#accordion li a.on img { width:200px; height:150px; right:0px; bottom:0px;}
#accordion li a.on span { font-size:14px; font-weight:bold;color:#f33;}
#accordion li a.on .mask { opacity:0;}  /*鼠标悬停的元素不需要遮罩层*/
/*手风琴效果javascript部分*/
var oUl = document.getElementById('accordion');
var aA = oUl.getElementsByTagName('a');
/*循环方式
for(var i = 0,len = aA.length; i < len; i++){
	aA[i].index = i;
	aA[i].onmouseover = function(){
		for(i = 0; i < len; i++){
			aA[i].className = '';
		}
		this.className = 'on';
	}
}*/
/*事件委托方式*/
oUl.onmouseover = function(evt){
	evt = evt || window.event;
	var target = evt.target || evt.srcElement;
	//清空所有a元素的class
	for(var i = 0,len = aA.length; i < len; i++){
		//aA[i].className = '';
		aA[i].className = aA[i].className.replace(/ ?on/g, '');//为了不影响其他class以及相关样式
	}
	//根据事件的冒泡原理，找到需要变更class的a元素
	while(target.nodeName.toLowerCase() != 'a' && target.nodeName.toLowerCase() != 'body'){
		target = target.parentNode;
	}
	//target.className = 'on';
	target.className += ' on';
}

运行效果：

课程网址：http://www.imooc.com/learn/72