綜合實戰(zhàn)題
來到這個題目，手風琴效果的全部你已經(jīng)全部學完了吧！下面來實現(xiàn)一下如下所展示的手風琴效果吧！
任務
任務1：根據(jù)注釋，請在右側的編輯器第62行后補全代碼——鼠標懸停的處理函數(shù)
任務2：根據(jù)注釋，請在右側的編輯器第70行后補全代碼——根據(jù)事件的冒泡原理，找到需要變更class 的LI元素
溫馨提示：完成的任務要與要求的代碼效果相一致才可以通過本次測試，否則就再看一遍視頻哦！
- ?不會了怎么辦
-
任務1提示：
function mouseoverHandler(e){
var target = e.target || e.srcElement;
var outer = document.getElementById('imageMenu');
var list = outer.getElementsByTagName('li');
任務2提示：
while(target.tagName != 'LI' || target.tagName == 'BODY'){
target = target.parentNode;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Accordion</title>
<style>
#imageMenu{width:500px;height:200px;overflow:hidden;}
/*動畫樣式*/
#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'){
//標準事件綁定方法
el.addEventListener(eventType, callback, false);
}else if(typeof el.attechEvent === 'function'){
//IE事件綁定方法
el.attachEvent('on' + eventType, callback);
}
}
//鼠標懸停的處理函數(shù)
//清空所有LI元素的big
for(var i = 0; i < list.length; i++){
list[i].className = list[i].className.replace(/ ?big/g, '');
}
//根據(jù)事件的冒泡原理，找到需要變更class 的LI元素
//給當前元素加上class big
target.className += ' big';
}
function initList(){
//取得外部元素
var outer = document.getElementById('imageMenu');
//取得每個列表項
var list = outer.getElementsByTagName('li');
for(var i =0; i < list.length; i++){
//對每個列表綁定鼠標懸停事件的監(jiān)聽
bind(list[i], 'mouseover', mouseoverHandler);
}
}
//執(zhí)行初始化函數(shù)
initList();
</script>
</body>
</html>
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
