jQuery事件移入移出练习——电影排行榜

最新推荐文章于 2021-08-26 18:13:24 发布
原创最新推荐文章于 2021-08-26 18:13:24 发布 · 233 阅读
0 ·
本内容遵循CC 4.0 BY-SA版权协议
jQuery 专栏收录该内容
39 篇文章
订阅专栏
本文介绍了一个使用HTML、CSS和jQuery实现的电影排行榜网页设计案例，通过动态效果展示电影排名及详细信息，包括导演、演员阵容及剧情简介。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</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 #ccc;
       }
       ul>li{
           list-style: none;
           padding: 5px 10px;
           border: 1px dashed #ccc;
       }
       ul>li:nth-child(-n+3) span{/*代表第三个元素以及之前的*/
           background: deeppink;
       }
       ul>li>span{
           display: inline-block;/*span是行级元素无法设置宽高，所以写这个变成行级块元素*/
           width: 20px;
           height: 20px;
           background: #ccc;
           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{/*.current后面有空格*/
          display: block;
      }


    </style>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
    $(function(){
        //监听li的移入移出事件
     $('li').hover(function(){
        $(this).addClass('current');
     },function(){
        $(this).removeClass('current');
     })
    })
    </script>
</head>
<body>
    <div class="box">
    <h1>电影排行榜</h1>
     <ul>
         <li><span>1</span>电影名称
         <div class="content">
             <img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=1ab4aa2544fbfbedc8543e2d19999c53/d439b6003af33a87a94b3b00c95c10385343b581.jpg" alt="">
             <p>《中国机长》（The Captain）是由刘伟强执导，于勇敢编剧，李锦文监制，张涵予、欧豪、杜江、袁泉、张天爱、李沁领衔主演，张雅玫、杨祺如、高戈主演的剧情传记灾难片。
                    该片根据2018年5月14日四川航空3U8633航班机组成功处置特情真实事件改编，讲述了“中国民航英雄机组”成员与119名乘客遭遇极端险情，在万米高空直面强风、低温、座舱释压的多重考验。</p>
         </div>
        </li>
         <li><span>2</span>电影名称
        <div class="content">
             <img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=1ab4aa2544fbfbedc8543e2d19999c53/d439b6003af33a87a94b3b00c95c10385343b581.jpg" alt="">
             <p>《中国机长》（The Captain）是由刘伟强执导，于勇敢编剧，李锦文监制，张涵予、欧豪、杜江、袁泉、张天爱、李沁领衔主演，张雅玫、杨祺如、高戈主演的剧情传记灾难片。
                    该片根据2018年5月14日四川航空3U8633航班机组成功处置特情真实事件改编，讲述了“中国民航英雄机组”成员与119名乘客遭遇极端险情，在万米高空直面强风、低温、座舱释压的多重考验。</p>
         </div></li>
         <li><span>3</span>电影名称
            <div class="content">
                    <img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=1ab4aa2544fbfbedc8543e2d19999c53/d439b6003af33a87a94b3b00c95c10385343b581.jpg" alt="">
                    <p>《中国机长》（The Captain）是由刘伟强执导，于勇敢编剧，李锦文监制，张涵予、欧豪、杜江、袁泉、张天爱、李沁领衔主演，张雅玫、杨祺如、高戈主演的剧情传记灾难片。
                           该片根据2018年5月14日四川航空3U8633航班机组成功处置特情真实事件改编，讲述了“中国民航英雄机组”成员与119名乘客遭遇极端险情，在万米高空直面强风、低温、座舱释压的多重考验。</p>
                </div></li>
         <li><span>4</span>电影名称
            <div class="content">
                    <img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=1ab4aa2544fbfbedc8543e2d19999c53/d439b6003af33a87a94b3b00c95c10385343b581.jpg" alt="">
                    <p>《中国机长》（The Captain）是由刘伟强执导，于勇敢编剧，李锦文监制，张涵予、欧豪、杜江、袁泉、张天爱、李沁领衔主演，张雅玫、杨祺如、高戈主演的剧情传记灾难片。
                           该片根据2018年5月14日四川航空3U8633航班机组成功处置特情真实事件改编，讲述了“中国民航英雄机组”成员与119名乘客遭遇极端险情，在万米高空直面强风、低温、座舱释压的多重考验。</p>
                </div></li>
         <li><span>5</span>电影名称
            <div class="content">
                    <img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=1ab4aa2544fbfbedc8543e2d19999c53/d439b6003af33a87a94b3b00c95c10385343b581.jpg" alt="">
                    <p>《中国机长》（The Captain）是由刘伟强执导，于勇敢编剧，李锦文监制，张涵予、欧豪、杜江、袁泉、张天爱、李沁领衔主演，张雅玫、杨祺如、高戈主演的剧情传记灾难片。
                           该片根据2018年5月14日四川航空3U8633航班机组成功处置特情真实事件改编，讲述了“中国民航英雄机组”成员与119名乘客遭遇极端险情，在万米高空直面强风、低温、座舱释压的多重考验。</p>
                </div></li>
         <li><span>6</span>电影名称
            <div class="content">
                    <img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike72%2C5%2C5%2C72%2C24/sign=1ab4aa2544fbfbedc8543e2d19999c53/d439b6003af33a87a94b3b00c95c10385343b581.jpg" alt="">
                    <p>《中国机长》（The Captain）是由刘伟强执导，于勇敢编剧，李锦文监制，张涵予、欧豪、杜江、袁泉、张天爱、李沁领衔主演，张雅玫、杨祺如、高戈主演的剧情传记灾难片。
                           该片根据2018年5月14日四川航空3U8633航班机组成功处置特情真实事件改编，讲述了“中国民航英雄机组”成员与119名乘客遭遇极端险情，在万米高空直面强风、低温、座舱释压的多重考验。</p>
                </div></li>
     </ul>

    </div>
</body>
</html>