jquery手风琴案例练习

最新推荐文章于 2024-07-25 16:45:46 发布

这是我的自己

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量468

点赞数 2

分类专栏： jquery练习文章标签： jquery css html

本文链接：https://blog.csdn.net/weixin_41355989/article/details/105895278

版权

jquery练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

手风琴案例练习

显示效果在这里插入图片描述

重点：
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>

这是我的自己

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery手风琴案例练习

手风琴案例练习显示效果重点：1.鼠标进入事件mouseenter 鼠标离开事件mouseleave2. 再执行下一次操作前都要先通过.stop() 停止动画3.sublings()选择当前事件外的兄弟事件完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> &lt...
复制链接

扫一扫

专栏目录