乘风原创程序

  • jquery实现手风琴案例
  • 2020/6/23 9:23:13
  • 手风琴案例练习,供大家参考,具体内容如下

    显示效果

    重点:

    1.鼠标进入事件mouseenter 鼠标离开事件mouseleave
    2. 再执行下一次操作前都要先通过.stop() 停止动画
    3.sublings()选择当前事件外的兄弟事件

    完整代码

    <!doctype html>
    <html>
     <head>
     <meta charset="utf-8">
     <title></title>
     <style type="text/css">
     *{
     margin: 0;
     padding:0;
     }
     
     img{
      width: 500px;
      height:250px;
      
     }
     
     
     .box{
      width: 900px;
      height: 300px;
      margin: 20px auto;
      border: 1px solid #808080;
     }
     
     .box ul li{
      float: left;
      list-style: none;
      overflow: hidden;
      height: 300px;
      width: 100px;
      
      position: relative;
      
     }
     
     .text{
      background-color:lightsteelblue;
      opacity: 0.7;
      text-align: center;
      height: 50px;
      width: 100%;
      line-height: 50px;
      position: absolute;
      color: black;
      bottom: 50px;
      
     }
     .link{
      background-color:whitesmoke;
      font-size: 15px;
      text-indent: 20px;
      height:50px ;
      line-height: 50px;
     }
     a{
      text-decoration: none;
     }
     p{
      float: left;
      
     }
     span{
      margin: auto 20px;
     }
     </style>
     </head>
     <body>
     <div class="box">
     <ul>
     //每一个li为一个手风琴页面的显示内容
     <li class="show" style="width: 500px;">
      <div class="img">
      <img class="show" src="img/images/p0.jpg" >
      </div>
      <div class="text">
      东大门
      </div>
      <div class="link">
      <a href="">
      <p>科技</p>
      <p>
      <span>科技故事</span>
      <span>科技故事</span>
      <span>科技故事</span>
      </p>
      </a>
      </div>
     </li>
     <li >
      <div class="img">
      <img src="img/images/p1.jpg" >
      </div>
      <div class="text">
      雷阳广场
      </div>
      <div class="link">
      <a href="">
      <p>科技</p>
      <p>
      <span>科技故事</span>
      <span>科技故事</span>
      <span>科技故事</span>
      </p>
      </a>
      </div>
     </li>
     <li >
      <div class="img">
      <img src="img/images/p3.jpg" >
      </div>
      <div class="text">
      校园石碑
      </div>
      <div class="link">
      <a href="">
      <p>东大门</p>
      <p>
      <span>科技故事</span>
      <span>科技故事</span>
      <span>科技故事</span>
      </p>
      </a>
      </div>
     </li>
     <li >
      <div class="img">
      <img src="img/images/p4.jpg" >
      </div>
      <div class="text">
      钟楼
      </div>
      <div class="link">
      <a href="">
      <p>科技</p>
      <p>
      <span>科技故事</span>
      <span>科技故事</span>
      <span>科技故事</span>
      </p>
      </a>
      </div>
     </li>
     <li >
      <div class="img">
      <img src="img/images/p5.jpg" >
      </div>
      <div class="text">
      椰林
      </div>
      <div class="link">
      <a href="">
      <p>科技</p>
      <p>
      <span>科技故事</span>
      <span>科技故事</span>
      <span>科技故事</span>
      </p>
      </a>
      </div>
     </li>
     </ul>
     </div>
     </body>
     <script src="./js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript">
     $(function(){
     var $li=$("ul>li") 
     $li.mouseenter(function () { //鼠标移入图片宽度变为500,siblings()把其他兄弟的宽度恢复默认宽度。
     //stop():在执行每次的事件前都必须停止上次的执行的事件,否则会出现最后一次鼠标事件移出后,图片显示空白
      $(this).stop().animate({width:500}).siblings().stop().animate({width:100}); 
     
     }); 
     $li.mouseleave(function () { //鼠标移出事件
      $(this).stop().animate({width:500}); 
      }); 
     });
     </script>
    </html>