PROMULGATOR

    聚客宝设计

    山东省淄博市
    Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="box">
    <h1>电影排行榜</h1>
    <ul>
        <li><span>1</span>《肖申克的救赎》
            <div class="content">
                <img src="http://www.jq22.com/img/cs/300x500-1.png" alt="">
                <p>《肖申克的救赎》是由弗兰克?达拉邦特执导，蒂姆?罗宾斯、摩根?弗里曼等主演。该片改编自斯蒂芬?金《四季奇谭》中收录的同名小说，该片中涵盖全片的主题是“希望”，全片透过监狱这一强制剥夺自由、高度强调纪律的特殊背景来展现作为个体的人对“时间流逝、环境改造”的恐惧。影片的结局有《基督山伯爵》式的复仇宣泄。
                </p>
            </div>
        </li>
        <li><span>2</span>《这个杀手不太冷》
            <div class="content">
                <img src="http://www.jq22.com/img/cs/300x500-2.png" alt="">
                <p>《这个杀手不太冷》是由吕克?贝松编剧并执导，让?雷诺、加里?奥德曼、娜塔丽?波特曼主演的动作片，该片于1994年9月14日在法国上映。该片讲述了一名职业杀手莱昂无意间搭救了一个全家被杀害的小女孩玛蒂尔达，他和小女孩互生情愫，最后他为了救玛蒂尔达而身亡的故事。
                </p>
            </div>
        </li>
        <li><span>3</span>《霸王别姬》
            <div class="content">
                <img src="http://www.jq22.com/img/cs/300x500-3.png" alt="">
                <p>《霸王别姬》是汤臣电影有限公司出品的文艺片，该片改编自李碧华的同名小说，由陈凯歌执导，李碧华、芦苇编剧；张国荣、巩俐、张丰毅领衔主演。影片围绕两位京剧伶人半个世纪的悲欢离合，展现了对传统文化、人的生存状态及人性的思考与领悟。1993年该片在中国内地以及中国香港上映，此后在世界多个国家和地区公映，并且打破中国内地文艺片在美国的票房纪录。
                </p>
            </div>
        </li>
        <li><span>4</span>《肖申克的救赎》
            <div class="content">
                <img src="http://www.jq22.com/img/cs/300x500-4.png" alt="">
                <p>《肖申克的救赎》是由弗兰克?达拉邦特执导，蒂姆?罗宾斯、摩根?弗里曼等主演。该片改编自斯蒂芬?金《四季奇谭》中收录的同名小说，该片中涵盖全片的主题是“希望”，全片透过监狱这一强制剥夺自由、高度强调纪律的特殊背景来展现作为个体的人对“时间流逝、环境改造”的恐惧。影片的结局有《基督山伯爵》式的复仇宣泄。
                </p>
            </div>
        </li>
        <li><span>5</span>《这个杀手不太冷》
            <div class="content">
                <img src="http://www.jq22.com/img/cs/300x500-5.png" alt="">
                <p>《这个杀手不太冷》是由吕克?贝松编剧并执导，让?雷诺、加里?奥德曼、娜塔丽?波特曼主演的动作片，该片于1994年9月14日在法国上映。该片讲述了一名职业杀手莱昂无意间搭救了一个全家被杀害的小女孩玛蒂尔达，他和小女孩互生情愫，最后他为了救玛蒂尔达而身亡的故事。
                </p>
            </div>
        </li>
        <li><span>6</span>《霸王别姬》
            <div class="content">
                <img src="http://www.jq22.com/img/cs/300x500-6.png" alt="">
                <p>《霸王别姬》是汤臣电影有限公司出品的文艺片，该片改编自李碧华的同名小说，由陈凯歌执导，李碧华、芦苇编剧；张国荣、巩俐、张丰毅领衔主演。影片围绕两位京剧伶人半个世纪的悲欢离合，展现了对传统文化、人的生存状态及人性的思考与领悟。1993年该片在中国内地以及中国香港上映，此后在世界多个国家和地区公映，并且打破中国内地文艺片在美国的票房纪录。
                </p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 * {
    margin:0;
    padding:0;
}
html,body {
    width:100%;
    height:100%;
}
.box {
    width:300px;
    height:450px;
    margin:50px auto;
    border:1px solid #000;
}
.box>h1 {
    font-size:20px;
    line-height:35px;
    color:chocolate;
    padding-left:10px;
    border-bottom:1px dashed #ccc;
}
ul>li {
    list-style:none;
    padding:5px 10px;
    border:1px dashed #ccc;
}
ul>li:nth-child(-n+3) span {
    background:chocolate;
}
ul>li>span {
    display:inline-block;
    width:20px;
    height:20px;
    background:#ccc;
    line-height:20px;
    text-align:center;
    margin-right:10px;
}
.content {
    overflow:hidden;
    margin-top:5px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 $(function() {
     // $("li").mouseenter(function() {
     //     $(this).addClass("current")
     // });
     // $("li").mouseleave(function() {
     //     $(this).removeClass("current")
     // });
     $("li").hover(function() {
             $(this).addClass("current")
         },
         function() {
             $(this).removeClass("current")
         });
 });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4
 立即下载

jquery电影排行榜列表

更新时间：2019-12-22 22:47:54

主要利用jquery中的addclass和removeclass先隐藏再显示

0