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