美文网首页
2018-11-01 使用 jQuery-实现电影排行榜移入移出

2018-11-01 使用 jQuery-实现电影排行榜移入移出

作者: Android砖家 | 来源:发表于2018-11-01 16:01 被阅读0次

    jQuery中文文档 :http://jquery.cuishifeng.cn/

    yhx.png

    实现代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuery-电影排行榜移入移出</title>
        <script src="js/jquery-1.6.4/jquery.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .box1 {
                width: 300px;
                height: 450px;
                margin: 50px auto;
                border: 1px solid #ccc;
            }
    
            .box1 > h1 {
                font-size: 20px;
                line-height: 35px;
                color: deeppink;
                padding-left: 10px;
            }
    
            ul li {
                list-style: none;
                padding: 5px 10px; /**上下内边距为5px,左右内边距为0px;*/
                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;
            }
            /**overflow: hidden 清除浮动*/
            .content {
                overflow: hidden;
                margin-top: 5px;
                display: none;
            }
    
            .content > img {
                width: 80px;
                height: 120px;
                float: left;
            }
    
            .content > p {
                display: inline-block;
                height: 120px;
                width: 180px;
                float: right;
                font-size: 12px;
            }
    
    
            /*
            注意:增加.currentIndex 作用在li上面,添加class属性
            */
            .currentIndex .content {
                display: block;
            }
        </style>
    
        <script>
            $(function () {
                $("li").hover(function () {
                    $(this).addClass("currentIndex");
                },function () {
                    $(this).removeClass("currentIndex")
                })
            })
        </script>
    </head>
    <body>
    
    <div class="box1">
        <h1>电影排行榜</h1>
        <ul>
            <li>
                <span>1</span>电影名称1
                <div class="content">
                    <img src="../images/zl.jpg" alt="">
                    <p>
                        《战狼2》的故事讲述了正经历人生最低谷的冷锋,原想在海上漂泊了此一生,却卷入了一场非洲国家的叛乱。本可以安全撤离的他,无法忘记军人的使命,绝不丢下身陷囹圄的同胞和难民们,便只身犯险冲回沦陷区,带领所有被困民众向邻</p>
                </div>
            </li>
            <li><span>2</span>电影名称2
                <div class="content">
                    <img src="../images/zl.jpg" alt="">
                    <p>
                        《战狼2》的故事讲述了正经历人生最低谷的冷锋,原想在海上漂泊了此一生,却卷入了一场非洲国家的叛乱。本可以安全撤离的他,无法忘记军人的使命,绝不丢下身陷囹圄的同胞和难民们,便只身犯险冲回沦陷区,带领所有被困民众向邻</p>
                </div>
            </li>
            <li><span>3</span>电影名称3
                <div class="content">
                    <img src="../images/zl.jpg" alt="">
                    <p>
                        《战狼2》的故事讲述了正经历人生最低谷的冷锋,原想在海上漂泊了此一生,却卷入了一场非洲国家的叛乱。本可以安全撤离的他,无法忘记军人的使命,绝不丢下身陷囹圄的同胞和难民们,便只身犯险冲回沦陷区,带领所有被困民众向邻</p>
                </div>
            </li>
            <li><span>4</span>电影名称4
                <div class="content">
                    <img src="../images/zl.jpg" alt="">
                    <p>
                        《战狼2》的故事讲述了正经历人生最低谷的冷锋,原想在海上漂泊了此一生,却卷入了一场非洲国家的叛乱。本可以安全撤离的他,无法忘记军人的使命,绝不丢下身陷囹圄的同胞和难民们,便只身犯险冲回沦陷区,带领所有被困民众向邻</p>
                </div>
            </li>
            <li><span>5</span>电影名称5
                <div class="content">
                    <img src="../images/zl.jpg" alt="">
                    <p>
                        《战狼2》的故事讲述了正经历人生最低谷的冷锋,原想在海上漂泊了此一生,却卷入了一场非洲国家的叛乱。本可以安全撤离的他,无法忘记军人的使命,绝不丢下身陷囹圄的同胞和难民们,便只身犯险冲回沦陷区,带领所有被困民众向邻</p>
                </div>
            </li>
    
        </ul>
    </div>
    </body>
    </html>
    
    

    效果图:

    yhx.gif

    相关文章

      网友评论

          本文标题:2018-11-01 使用 jQuery-实现电影排行榜移入移出

          本文链接:https://www.haomeiwen.com/subject/eoexxqtx.html