【jQuery案例】事件相关案例

电影排行榜

实现鼠标移入时显示，移出时隐藏

• jQuery代码

  $(function(){
          // 移入事件
          $('li').mouseenter(function(){
              $(this).addClass('current')
          })
  
          // 移出事件
          $('li').mouseleave(function () {
              $(this).removeClass('current')
          })
  })
  

  给li添加类和删除类实现显示和隐藏

• css代码

  *{
          margin: 0;
          padding: 0;
      }
  
      .cont{
          width: 300px;
          height: 450px;
          border: 2px solid black;
          margin: 100px auto;
      }
  
      .cont>h1{
          font-size: 20px;
          line-height: 35px;
          color: deeppink;
          padding-left: 10px;
          border-bottom: 1px dashed gainsboro;
      }
  
      ul>li{
          list-style: none;
          padding: 5px 10px;
          border: 1px dashed gainsboro;
      }
  
      ul>li>span{
          display: inline-block;
          width: 20px;
          height: 20px;
          background: #cccccc;
          text-align: center;
          line-height: 20px;
          margin-right: 5px;
      }
  
      ul>li:nth-child(-n+3)>span{
          background: deeppink;
      }
  
      .text{
          overflow: hidden;
          display: none;
      }
  
      .text>img{
          margin-top: 5px;
          width: 80px;
          height: 120px;
          float: left;
      }
  
      .text>p{
          width: 180px;
          height: 120px;
          float: right;
          font-size: 12px;
          line-height: 20px;
      }
  
      .current .text{
          display: block;
      }
  

• 页面结构

  <div class="cont">
      <h1>电影排行榜</h1>
      <ul>
          <li><span>1</span>电影介绍
              <div class="text">
                  <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1617143387,166304967&fm=26&gp=0.jpg">
                  <p>该片讲述了新中国成立70年间普通百姓与共和国息息相关的故事，于2019年9月30日在中国大陆上映。2020年1月11日，首届“光影中国”电影荣誉盛典获得2019年度荣誉推介电影</p>
              </div>    
          </li>
          <li><span>2</span>电影介绍
              <div class="text">
                  <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1617143387,166304967&fm=26&gp=0.jpg">
                  <p>该片讲述了新中国成立70年间普通百姓与共和国息息相关的故事，于2019年9月30日在中国大陆上映。2020年1月11日，首届“光影中国”电影荣誉盛典获得2019年度荣誉推介电影</p>
              </div>    
          </li>
          <li><span>3</span>电影介绍
              <div class="text">
                  <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1617143387,166304967&fm=26&gp=0.jpg">
                  <p>该片讲述了新中国成立70年间普通百姓与共和国息息相关的故事，于2019年9月30日在中国大陆上映。2020年1月11日，首届“光影中国”电影荣誉盛典获得2019年度荣誉推介电影</p>
              </div>    
          </li>
          <li><span>4</span>电影介绍
              <div class="text">
                  <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1617143387,166304967&fm=26&gp=0.jpg">
                  <p>该片讲述了新中国成立70年间普通百姓与共和国息息相关的故事，于2019年9月30日在中国大陆上映。2020年1月11日，首届“光影中国”电影荣誉盛典获得2019年度荣誉推介电影</p>
              </div>    
          </li>
          <li><span>5</span>电影介绍
              <div class="text">
                  <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1617143387,166304967&fm=26&gp=0.jpg">
                  <p>该片讲述了新中国成立70年间普通百姓与共和国息息相关的故事，于2019年9月30日在中国大陆上映。2020年1月11日，首届“光影中国”电影荣誉盛典获得2019年度荣誉推介电影</p>
              </div>    
          </li>
          <li><span>6</span>电影介绍
              <div class="text">
                  <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1617143387,166304967&fm=26&gp=0.jpg">
                  <p>该片讲述了新中国成立70年间普通百姓与共和国息息相关的故事，于2019年9月30日在中国大陆上映。2020年1月11日，首届“光影中国”电影荣誉盛典获得2019年度荣誉推介电影</p>
              </div>    
          </li>
      </ul>
  </div>
  

TAB选项卡

效果鼠标移入切换图片

• jQuery代码

  $(function(){
          $('.nav>li').mouseenter(function () {
              // 修改被移入选项卡的背景颜色
              $(this).addClass('current');
              // 还原非当前选项卡背景颜色
              $(this).siblings().removeClass('current'); // siblings()方法：找到非当前元素
              
              // 获取当前选项卡的索引
              var index = $(this).index(index);
              // 根据索引找到图片
              var $li = $('.imgs>li').eq(index);
              
              // 隐藏非当前的其他图片
              $li.siblings().removeClass('show');
              // 显示对应图片
              $li.addClass('show');
          })
      })
  

• css部分

  *{
          margin: 0;
          padding: 0;
      }
  
      .box{
          width: 460px;
          height: 300px;
          border: 2px solid #000000;
          margin: 200px auto;
          overflow: hidden;
          position: relative;
      }
  
      .nav>li{
          list-style: none;
          width: 115px;
          height: 50px;
          line-height: 50px;
          float: left;
          background: orange;
          text-align: center;
          font-weight: bolder;
      }
  
      .nav>.current{
          background: #cccccc;
      }
  
      .imgs>li{
          list-style: none;
          display: none;
      }
  
      .imgs>li>img{
          height: 250px;
          position: absolute;
          bottom: 0;
          left: 0;
          transform: translateX(-150px);
      }
  
      .imgs>.show{
          display: block;
      }
  

• 页面结构

  <div class="box">
      <ul class="nav">
          <li class="current">手机</li>
          <li>门铃</li>
          <li>洗衣机</li>
          <li>手表</li>
      </ul>
      <ul class="imgs">
          <li class="show"><img src="imgs/1.jpg"></li>
          <li><img src="imgs/2.jpg"></li>
          <li><img src="imgs/3.jpg"></li>
          <li><img src="imgs/4.jpg"></li>
      </ul>
  </div>