jQuery移入移出练习 

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

        .box{
            width: 300px;
            height: 450px;
            margin: 50px auto;
            border: 1px dashed #000;
        }
        .box>h1{
            font-size: 20px;
            line-height: 35px;
            color: #e74c3c;
            padding-left: 10px;
            border-bottom: 1px dashed #ccc;
        }
        ul>li{
            list-style: none;
            padding: 5px 10px;
            border-bottom: 1px dashed #ccc;
        }
        ul>li:nth-child(-n+3) span{
            background: #e74c3c;
        }
        ul>li>span{
            display: inline-block;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            background-color: #ccc;
            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;
            font-size: 12px;
            line-height: 20px;
            float: right;
        }
        .current .content{
            display: block;
        }
    </style>
    <script src="../js/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            /*
            // 入门写法
            $("li").mouseenter(function () {
                $(this).addClass("current");
            });
            $("li").mouseleave(function () {
                $(this).removeClass("current");
            });
            */

            /*
            // 进阶写法
            $("li").hover(function () {
                $(this).addClass("current");
            }, function () {
                $(this).removeClass("current");
            });
            */

            // 终极写法
            $("li").hover(function () {
               $(this).toggleClass("current");
            });

        });
    </script>
</head>
<body>
    <div class="box">
        <h1>电影票房排行榜</h1>
        <ul>
            <li>
                <span>1</span>
                战狼2（56.39亿）
                <div class="content">
                    <img src="../images/zl.jpg" alt="">
                    <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场纷争。</p>
                </div>
            </li>
            <li>
                <span>2</span>
                哪吒之魔童降世（49.34亿）
                <div class="content">
                    <img src="../images/nz.jpg" alt="">
                    <p>简介：天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。太乙受命将灵珠托生于陈塘关李靖家的儿子哪吒身上。然而阴差阳错，灵珠和魔丸竟然被掉包。本应是灵珠英雄的哪吒却成了混世大魔王，这调皮捣蛋顽劣不堪的哪吒却徒有一颗做英雄的心。然而面对众人对哪吒的误解和即将来临的天雷的降临，哪吒是否命中注定会立地成魔，他将何去何从。</p>
                </div>
            </li>
            <li>
                <span>3</span>
                流浪地球（46.18亿）
                <div class="content">
                    <img src="../images/lldq.jpg" alt="">
                    <p>简介：近年来，科学家们发现太阳急速衰老膨胀，短时间内包括地球在内的整个太阳系都将被太阳所吞没。为了自救，人类提出一个名为“流浪地球”的大胆计划，即倾全球之力在地球表面建造上万座发动机和转向发动机，推动地球离开太阳系，用2500年的时间奔往新家园。</p>
                </div>
            </li>
            <li>
                <span>4</span>
                复仇者联盟4（42.05亿）
                <div class="content">
                    <img src="../images/fl4.jpg" alt="">
                    <p>简介：来自泰坦星的灭霸为了解决宇宙资源匮乏、人口暴增的问题，集齐了所有无限宝石，一个响指成功地使全宇宙生命随机减半。
                        宇宙由于灭霸的行动而变得满目疮痍，但是五年之后，被困在量子领域的蚁人意外回到现实世界，他的出现为幸存的复仇者点燃了希望。无论前方将遭遇怎样的后果，幸存的复仇者都必须在剩余盟友的帮助下再一次集结，以逆转灭霸的所作所为，彻底恢复宇宙的秩序。</p>
                </div>
            </li>
            <li>
                <span>5</span>
                红海行动（36.22亿）
                <div class="content">
                    <img src="../images/hhxd.jpg" alt="">
                    <p>简介：索马里海域外，中国商船遭遇劫持，部分船员被海盗杀害，其他人沦为俘虏。蛟龙突击队沉着应对，潜入商船进行突袭，成功解救全部人质。狙击手罗星在追击海盗时不幸被击中脊柱神经，欠缺的位置由顾顺替代。</p>
                </div>
            </li>
            <li>
                <span>6</span>
                美人鱼（33.9亿）
                <div class="content">
                    <img src="../images/mry.jpg" alt="">
                    <p>简介：富豪刘轩（邓超饰）的地产计划涉及填海工程，威胁靠海为生的居民。因为人类对大海及生态的破坏，美人鱼只能被赶到了一艘破船里艰难生存，背负家族秘密的珊珊（林允饰）被派遣前往阻止填海计划。刘轩是一个靠自己努力才取得成就的人，虽然表面有钱但实则空虚寂寞的他和美人鱼珊珊在交手过程中互生情愫。刘轩最终因为爱上珊珊而停止填海工作，但珊珊却因意外受伤而消失于大海。</p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

posted @ 2020-05-08 22:17  陈太浪  阅读(347)  评论(0)  编辑  收藏  举报