利用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>