                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /HTML/CSS
                        
                        /手風(fēng)琴效果

手風(fēng)琴案例冒泡處理

<!doctype?html>
<html>
<head>
????<meta?charset="utf-8">
????<title>Accordion</title>
????<style>
????????#imageMenu{width:500px;height:200px;overflow:hidden;}

????????/*動(dòng)畫(huà)樣式*/
????????#imageMenu?ul?*{transition:all?linear?0.2s;}

????????#imageMenu?ul{width:800px;height:200px;padding:?0;?margin:?0;?list-style:?none}
????????#imageMenu?li{float:left;}

????????#imageMenu?ul?li?a{width:?73px;}

????????/*放大后的樣式*/
????????#imageMenu?ul?li.big?a?{width:200px;}

????????#imageMenu?li?a{width:98px;height:200px;display:block;text-indent:9999px;border-right:2px?solid?#fff;cursor:pointer;overflow:hidden;}

????????#imageMenu?li.landscapes?a{background:url(http://img1.sycdn.imooc.com//53451c66000170b503200200.jpg)?no-repeat;}
????????#imageMenu?li.people?a{background:url(http://img1.sycdn.imooc.com//53451cc900012a0303200200.jpg)?no-repeat;}
????????#imageMenu?li.nature?a{background:url(http://img1.sycdn.imooc.com//53451d020001336503200200.jpg)?no-repeat;}
????????#imageMenu?li.urban?a{background:url(http://img1.sycdn.imooc.com//53451d370001d17203200200.jpg)?no-repeat;}
????????#imageMenu?li.abstract?a{background:url(http://img1.sycdn.imooc.com//53451d5700013fd203200200.jpg)?no-repeat;}

????</style>
</head>
<body>
<div?id="imageMenu">
????<ul>
????????<li?class="landscapes">
????????????<a?href="#link1">Landscapes</a>
????????</li>
????????<li?class="people?big">
????????????<a?href="#link1">People</a>
????????</li>
????????<li?class="nature">
????????????<a?href="#link1">Nature</a>
????????</li>
????????<li?class="urban">
????????????<a?href="#link1">Urban</a>
????????</li>
????????<li?class="abstract">
????????????<a?href="#link1">Abstract</a>
????????</li>
????</ul>
</div>
<script?type="text/javascript">

????function?bind(el,?eventType,?callback){
????????if(typeof?el.addEventListener?===?'function'){
????????????//標(biāo)準(zhǔn)事件綁定方法
????????????el.addEventListener(eventType,?callback,?false);
????????}else?if(typeof?el.attechEvent?===?'function'){
????????????//IE事件綁定方法
????????????el.attachEvent('on'?+?eventType,?callback);
????????}
????}

????//鼠標(biāo)懸停的處理函數(shù)
????function?mouseoverHandler(e){
????????var?target?=?e.target,
????????????????image?=?document.getElementById('imageMenu'),
????????????????list?=?image.getElementsByTagName('li')
????????//清空所有LI元素的big
????????for(var?i?=?0;?i?<?list.length;?i++){
????????????list[i].className?=?list[i].className.replace(/??big/g,?'');
????????}

????????//根據(jù)事件的冒泡原理，找到需要變更c(diǎn)lass?的LI元素
????????while(target.tagName?!==?'LI'&&target.tagName!==?'BODY'){
????????????target?=?target.parentNode;
????????}


????????//給當(dāng)前元素加上class?big
????????target.className?+=?'?big';
????}

????function?initList(){
????????//取得外部元素
????????var?outer?=?document.getElementById('imageMenu');
????????//取得每個(gè)列表項(xiàng)
????????var?list?=?outer.getElementsByTagName('li');
????????for(var?i?=0;?i?<?list.length;?i++){
????????????//對(duì)每個(gè)列表綁定鼠標(biāo)懸停事件的監(jiān)聽(tīng)
????????????bind(list[i],?'mouseover',?mouseoverHandler);
????????}
????}

????//執(zhí)行初始化函數(shù)
????initList();
</script>
</body>
</html>