3-3 实战题
本节编程练习不计算学习进度，请电脑登录imooc.com操作

实战题

学习完《用JavaScript实现手风琴效果》视频课程后，完成本次实战练习，快来检验你的实战成果吧！本模块代码的最终实现最终的手风琴效果。

任务

请在右侧的js编辑器第37行补全代码，功能是对每个列表绑定鼠标悬停事件的监听。

 

温馨提示：完成的任务要与要求的代码效果相一致才可以通过本次测试，否则就再看一遍视频哦！
index.htmlscript.jsstyle.css 
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <link rel="stylesheet" type="text/css" href="demo-css.css">
  6. </head>
  7. <body>
  8.     <div id="subject" class="wrapper">
  9.     <ul>
  10.         <li class="big">
  11.             <a href="#link1">
  12.                 <img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
  13.                 <div class="info">
  14.                 <h3 style="color:#f62368">聚美妆</h3>
  15.                 <p>聚美妆1/2周年庆</p>
  16.                 <p class="price"><strong>1</strong><i>折起</i></p>
  17.                 </div>
  18.                 <s class="line"></s>
  19.                 <i class="mask"></i>
  20.             </a>
  21.         </li>
  22.         <li>
  23.             <a href="#link2">
  24.                 <img src="http://gtms01.alicdn.com/tps/i1/T1qxGLFsVbXXbA5QAK-195-120.jpg_Q90.jpg">
  25.                 <div class="info">
  26.                 <h3 style="color:#ff578a">Baby购</h3>
  27.                 <p>宝宝该换装了，新品抢购</p>
  28.                 <p class="price"><strong>2.5</strong><i>折起</i></p>
  29.                 </div>
  30.                 <s class="line"></s>    <i class="mask"></i>
  31.             </a>
  32.         </li>
  33.         <li>
  34.             <a href="#link2">
  35.                 <img src="http://gtms02.alicdn.com/tps/i2/T1KOSNFxXaXXbA5QAK-195-120.jpg_Q90.jpg">
  36.                 <div class="info">
  37.                 <h3 style="color:#6d3fa7">时装团</h3>
  38.                 <p>时尚春装，清新小潮搭配</p>
  39.                 <p class="price"><strong>1</strong><i>折起</i></p>
  40.                 </div>
  41.                 <s class="line"></s>    <i class="mask"></i>
  42.             </a>
  43.         </li>
  44.         <li>
  45.             <a href="#link3">
  46.                 <img src="http://gtms04.alicdn.com/tps/i4/T1CCeIFrVbXXbA5QAK-195-120.jpg_Q90.jpg">
  47.                 <div class="info">
  48.                 <h3 style="color:#d61939">TV购</h3>
  49.                 <p>补血养颜 就这么简单</p>
  50.                 <p class="price"><strong>2.6</strong><i>折起</i></p>
  51.                 </div>
  52.                 <s class="line"></s><i class="mask"></i>
  53.             </a>
  54.         </li>
  55.         <li>
  56.             <a href="#link4">
  57.                 <img src="http://gtms01.alicdn.com/tps/i1/T1jmKJFyJbXXbA5QAK-195-120.jpg_Q90.jpg">
  58.                 <div class="info">
  59.                 <h3 style="color:#6f9400">聚新鲜</h3>
  60.                 <p>最纯正的泰国香米</p>
  61.                 <p class="price"><strong>5</strong><i>折起</i></p>
  62.                 </div>
  63.                 <i class="mask"></i>
  64.             </a>
  65.         </li>
  66.     </ul>
  67.     </div>
  68.     <script type="text/javascript" src="accordin.js"></script>
  69. </body>
  70. </html>
  1. //事件绑定方法
  2. function bind(el, eventType, callback){
  3.     if(typeof el.addEventListener === 'function'){
  4.         //标准事件绑定方法
  5.         el.addEventListener(eventType, callback, false);
  6.     }else if(typeof el.attechEvent === 'function'){
  7.         //IE事件绑定方法
  8.         el.attachEvent('on' + eventType, callback);
  9.     }
  10. }
  11.  
  12. //鼠标悬停的处理函数
  13. function mouseoverHandler(e){
  14.     var target = e.target || e.srcElement;
  15.     var outer = document.getElementById('subject');
  16.     var list = outer.getElementsByTagName('li');
  17.  
  18.     //清空所有LI元素的class
  19.     for(var i = 0; i < list.length; i++){
  20.         list[i].className = '';
  21.     }
  22.     //根据事件的冒泡原理，找到需要变更class 的LI元素
  23.     while(target.tagName != 'LI' || target.tagName == 'BODY'){
  24.         target = target.parentNode;
  25.     }
  26.  
  27.     target.className = 'big';
  28. }
  29.  
  30. function initList(){
  31.     //取得外部元素
  32.     var outer = document.getElementById('subject');
  33.     //取得每个列表项
  34.     var list = outer.getElementsByTagName('li');
  35.     for(var i =0; i < list.length; i++){
  36.         //对每个列表绑定鼠标悬停事件的监听
  37.        ？
  38.     }
  39. }
  40.  
  41. //执行初始化函数
  42. initList();
  1. body,ul,li,p,h3 {margin: 0;padding: 0}
  2. ul,ol {list-style: none;}
  3.  
  4. /*外框*/
  5. .wrapper{ height:128px; border:1px solid #d3d3d3; border-color:rgba(0,0,0,.12); overflow:hidden; width:938px; background:#fff;}
  6.  
  7. /*动画效果*/
  8. /*2-2题目 动画样式的补全*/
  9. /*.wrapper ul *{ transition:all .1s linear;}*/
  10.  
  11.  
  12. .wrapper li{ width:156px; height:128px; float:left; overflow:hidden;}
  13. .wrapper li a{ width:156px; height:128px; display:block; position:relative; cursor:pointer; text-decoration:none; overflow:hidden;}
  14.  
  15. /*当前列表项悬停遮罩层消失*/
  16. /*2-1题目补全*/
  17. /*.wrapper li a:hover .mask{ opacity:0;}*/
  18.  
  19. .wrapper li img{ height:72px; width:117px; position:absolute; bottom:0; right:-13px;}
  20. .wrapper li .line{ height:128px; width:0; font-size:0; border-right:1px dashed #cacaca; position:absolute; right:0; top:4px;}
  21. .wrapper li .info{ position:absolute; top:0; left:0; width:136px; padding:4px 10px;}
  22. .wrapper li .info h3{ font-size:14px; font-weight:700;}
  23. .wrapper li .info p{ color:#868686; font-size:12px; overflow:hidden; width:136px; height:22px; line-height:22px;}
  24. .wrapper li .info p.price{ font-size:14px; font-style:italic; color:#fa2a5d; height:35px;}
  25. .wrapper li .info p.price strong{ font-size:22px; font-family:Arial; padding-right:2px;}
  26. .wrapper li .info p.price i{ font-size:14px}
  27.  
  28. /*遮罩层的样式*/
  29. /*2-3 遮罩层样式的绝对定位的补全*/
  30. .wrapper .mask{ height:128px; width:156px; display:block; /*position:absolute;*/ top:0; left:0; background:#000;opacity:0;}
  31.  
  32. /*遮罩层悬停时显示阴影*/
  33. .wrapper:hover .mask{opacity:.15;}
  34.  
  35. /*展开状态*/
  36. .wrapper .big, .wrapper .big a { width:314px}
  37. .wrapper .big img{ width:195px; height:120px; right:0; bottom:0;}
  38. .wrapper .big .info{ width:294px;}
  39. .wrapper .big .info h3{ font-size:18px;}
  40. .wrapper .big .info p{ font-size:14px; width:166px;}
  41. .wrapper .big .info p.price{ font-size:16px; padding-top:7px;}
  42. .wrapper .big .info p.price strong{ font-size:28px;}
  43. .wrapper .big .info p.price i{ font-size:16px;}
  44. .wrapper .big .mask{ width:314px;}
下一节