jQuery实例——电影排行榜

最新推荐文章于 2023-12-08 20:05:34 发布

jwz934738949

最新推荐文章于 2023-12-08 20:05:34 发布

阅读量279

点赞数 1

分类专栏： jQuery+Ajax

本文链接：https://blog.csdn.net/jwz934738949/article/details/108347933

版权

jQuery+Ajax 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

当移入时，显示电影封面与电影简介，移出时，不显示电影细节

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>电影排行榜</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 300px;
      height: 450px;
      margin: 50px auto;
      border: 1px solid #000;
    }

    .box > h1 {
      font-size: 20px;
      line-height: 35px;
      color: deeppink;
      padding-left: 10px;
      border: 1px dashed #cccccc;
    }

    ul > li {
      list-style: none;
      padding: 5px 10px;
      border: 1px dashed #cccccc;
    }

    ul > li:nth-child(-n+3) span {
      background-color: deeppink;
    }

    ul > li > span {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: #cccccc;
      text-align: center;
      line-height: 20px;
      margin-right: 10px;
    }

    .content {
      overflow: hidden;
      margin-top: 5px;
      display: none;
    }

    .content > img {
      width: 80px;
      height: 120px;
      float: left;
    }

    .content > p {
      width: 180px;
      height: 120px;
      float: right;
      font-size: 12px;
      line-height: 20px;
    }

    .current .content {
      display: block;
    }
  </style>
  <script src="./js/jquery-3.5.1.js"></script>
  <script>
    $(function () {
      $("li").hover(function () {
        // 监听li的移入事件
        $(this).addClass("current")
      }, function () {
        // 监听li的移出事件
        $(this).removeClass("current")
      })
    })
  </script>
</head>
<body>
<div class="box">
  <h1>电影排行榜</h1>
  <ul>
    <li>
      <span>1</span>电影名称
      <div class="content">
        <img src="images/babai.jpg" alt="">
        <p>1937年淞沪会战的最后一役，“八百壮士”奉命坚守上海四行仓库，以少敌多顽强抵抗四天四夜。电影《八佰》由管虎导演，是亚洲首部全片使用IMAX摄影机拍摄的商业电影，将于2020年8月21日全国影院上映。</p>
      </div>
    </li>
    <li>
      <span>2</span>电影名称
      <div class="content">
        <img src="images/babai.jpg" alt="">
        <p>1937年淞沪会战的最后一役，“八百壮士”奉命坚守上海四行仓库，以少敌多顽强抵抗四天四夜。电影《八佰》由管虎导演，是亚洲首部全片使用IMAX摄影机拍摄的商业电影，将于2020年8月21日全国影院上映。</p>
      </div>
    </li>
    <li>
      <span>3</span>电影名称
      <div class="content">
        <img src="images/babai.jpg" alt="">
        <p>1937年淞沪会战的最后一役，“八百壮士”奉命坚守上海四行仓库，以少敌多顽强抵抗四天四夜。电影《八佰》由管虎导演，是亚洲首部全片使用IMAX摄影机拍摄的商业电影，将于2020年8月21日全国影院上映。</p>
      </div>
    </li>
    <li>
      <span>4</span>电影名称
      <div class="content">
        <img src="images/babai.jpg" alt="">
        <p>1937年淞沪会战的最后一役，“八百壮士”奉命坚守上海四行仓库，以少敌多顽强抵抗四天四夜。电影《八佰》由管虎导演，是亚洲首部全片使用IMAX摄影机拍摄的商业电影，将于2020年8月21日全国影院上映。</p>
      </div>
    </li>
    <li>
      <span>5</span>电影名称
      <div class="content">
        <img src="images/babai.jpg" alt="">
        <p>1937年淞沪会战的最后一役，“八百壮士”奉命坚守上海四行仓库，以少敌多顽强抵抗四天四夜。电影《八佰》由管虎导演，是亚洲首部全片使用IMAX摄影机拍摄的商业电影，将于2020年8月21日全国影院上映。</p>
      </div>
    </li>
    <li>
      <span>6</span>电影名称
      <div class="content">
        <img src="images/babai.jpg" alt="">
        <p>1937年淞沪会战的最后一役，“八百壮士”奉命坚守上海四行仓库，以少敌多顽强抵抗四天四夜。电影《八佰》由管虎导演，是亚洲首部全片使用IMAX摄影机拍摄的商业电影，将于2020年8月21日全国影院上映。</p>
      </div>
    </li>
  </ul>
</div>
</body>
</html>

在这里插入图片描述

jwz934738949

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实例——电影排行榜

当移入时，显示电影封面与电影简介，移出时，不显示电影细节<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>电影排行榜</title> <style> * { margin: 0; padding: 0; } .box { width: 300px; .
复制链接

扫一扫