35-电影排行榜下（添加事件）

最新推荐文章于 2020-12-11 18:24:38 发布

杨亚仑

最新推荐文章于 2020-12-11 18:24:38 发布

阅读量161

点赞数

分类专栏： jQuery入门练习

本文链接：https://blog.csdn.net/yangyalun/article/details/83352619

版权

jQuery入门练习专栏收录该内容

60 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>35-电影排行榜下（添加事件）</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;
            width: 20px;
            height: 20px;
            background: #ccc;
            text-align: center;
            line-height: 20px;
            margin-right: 10px;
        }
        .count{
            overflow: hidden;
            margin-top: 5px;

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

    </style>
    <script src="JS_file/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //    编写jQuery相关代码
            //1.监听li的移入事件
            var $content=$("  <div class=\"count\">\n" +
                "                <img src=\"images/zl.png\">\n" +
                "                <p>《战狼Ⅱ》是吴京执导的动作军事电影，由吴京、弗兰克·格里罗、吴刚、张翰、卢靖姗、淳于珊珊、\n" +
                "                    丁海峰等主演。该片于2017年7月27日在中国内地上映 。该片讲述了脱下军装的冷锋被卷入了一场非洲\n" +
                "                    国家的叛乱，本来能够安全撤离的他无法忘记军人的职责，重回战场展开救援的故事。2017年12月，该片\n" +
                "                    获得2017中国-东盟电影节最佳影片奖，在第二届澳门国际影展上获得亚洲人气电影大奖 。\n" +
                "                </p>\n" +
                "        </div>");
            /*   $("li").mouseenter(function () {
                   $(this).append($content);
               });
               $("li").mouseleave(function () {
                   $content.remove();
               })*/
            /*hove方法*/
            $("li").hover(function () {
                $(this).append($content);
            },function () {
                $content.remove();
            })
        })
    </script>
</head>

<body>
<div class="box">
    <h1>电影排行榜</h1>
    <ul>
        <li ><span>1</span>电影名称</li>
        <li><span>2</span>电影名称</li>
        <li><span>3</span>电影名称</li>
        <li><span>4</span>电影名称</li>
        <li><span>5</span>电影名称</li>
        <li><span>6</span>电影名称</li>

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