jQuery实现电影排行榜

最新推荐文章于 2024-02-14 09:08:49 发布

zeddme

最新推荐文章于 2024-02-14 09:08:49 发布

阅读量1.2k

点赞数 3

分类专栏： js 文章标签： html jquery css

本文链接：https://blog.csdn.net/qq_44888570/article/details/109186701

版权

js 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

利用jQuery实现的一个简单的电影排行榜，先看一下效果图：
在这里插入图片描述
样式布局没什么可说的，重要的是jQuery通过添加或移除类来操作DOM元素，大家可以做做，有助于理解jQuery的DOM操作。如果有什么疑问，欢迎大家提问，留言或者私信都可。

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

        .toplist {
            width: 400px;
            height: 550px;
            border: 1px solid #000;
            margin: 50px auto;
            box-sizing: border-box;
        }

        .toplist > h1 {
            color: deeppink;
            font-size: 20px;
            border-bottom: 1px dashed #666666;
            padding: 10px;
        }

        .toplist > ul {
            list-style: none;
        }

        .toplist > ul li {
            line-height: 30px;
            border: 1px dashed #666666;
            padding: 5px;
        }

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

        /*li:nth-child(n+6)
        选中从第6个开始的子元素
        负方向范围
        :nth-child(-n+9)
        选中从第1个到第9个子元素。使用 :nth-child(-n+9) ，就相当让你选中第9个和其之前的所有子元素*/
        .toplist ul li:nth-child(-n+3) span {
            background-color: deeppink;
        }

        .content {
            overflow: hidden;
            display: none;
        }

        .toplist .content p {
            font-size: 13px;
        }

        .content img {
            float: left;
        }

        .content p {
            width: 200px;
            height: 100px;
            float: right;
        }

        .toplist a {
            text-decoration: none;
            color: #000;
        }

        .current .content {
            display: block;
        }
    </style>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            var lis = $('.toplist li');

            lis.hover(function () {
                    $(this).addClass('current');
                }
                , function () {
                    $(this).removeClass('current');
                });
        });
    </script>
</head>
<body>
<div class="toplist">
    <h1>电影排行榜</h1>
    <ul>
        <li>
            <span>1</span>
            <a href="#">电影名称</a><br>
            <div class="content">
                <img src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=773e7eb83d00abb2a0a9e67f9a464cdc&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Fcaef76094b36acaf098be86278d98d1000e99cc0.jpg"
                     alt="战狼">
                <p>简介:《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造</p>
            </div>
        </li>
        <li>
            <span>2</span>
            <a href="#">电影名称</a><br>
            <div class="content">
                <img src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=773e7eb83d00abb2a0a9e67f9a464cdc&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Fcaef76094b36acaf098be86278d98d1000e99cc0.jpg"
                     alt="战狼">
                <p>简介:《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造</p>
            </div>
        </li>
        <li>
            <span>3</span>
            <a href="#">电影名称</a><br>
            <div class="content">
                <img src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=773e7eb83d00abb2a0a9e67f9a464cdc&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Fcaef76094b36acaf098be86278d98d1000e99cc0.jpg"
                     alt="战狼">
                <p>简介:《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造</p>
            </div>
        </li>
        <li>
            <span>4</span>
            <a href="#">电影名称</a><br>
            <div class="content">
                <img src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=773e7eb83d00abb2a0a9e67f9a464cdc&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Fcaef76094b36acaf098be86278d98d1000e99cc0.jpg"
                     alt="战狼">
                <p>简介:《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造</p>
            </div>
        </li>
        <li>
            <span>5</span>
            <a href="#">电影名称</a><br>
            <div class="content">
                <img src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=773e7eb83d00abb2a0a9e67f9a464cdc&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Fcaef76094b36acaf098be86278d98d1000e99cc0.jpg"
                     alt="战狼">
                <p>简介:《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造</p>
            </div>
        </li>
        <li>
            <span>6</span>
            <a href="#">电影名称</a><br>
            <div class="content">
                <img src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=773e7eb83d00abb2a0a9e67f9a464cdc&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Fcaef76094b36acaf098be86278d98d1000e99cc0.jpg"
                     alt="战狼">
                <p>简介:《战狼》是由吴京执导的现代军事战争片，该片由吴京、余男、倪大红、斯科特·阿金斯 、周晓鸥等主演。该影片属于国内首部3D动作战争电影，历时七年全力打造</p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

zeddme

关注

3
点赞
踩
14

收藏

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

利用jQuery实现的一个简单的电影排行榜，先看一下效果图：样式布局没什么可说的，重要的是jQuery通过添加或移除类来操作DOM元素，大家可以做做，有助于理解jQuery的DOM操作。如果有什么疑问，欢迎大家提问，留言或者私信都可。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>toplist</title> &l
复制链接

扫一扫