jQuery编写排行榜

最新推荐文章于 2022-03-29 08:45:42 发布
最新推荐文章于 2022-03-29 08:45:42 发布
阅读量869 收藏 4
点赞数 1
分类专栏： Web 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43873198/article/details/119803006
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/homework1.css" />
	</head>
	<body>
		<div class="container">
			<div class="title">动漫排行</div>
			<ul>
				<li>
					<div class="top">
						<div class="no">1</div>
						<span class="title">秦时明月</span>
					</div>
					<div class="detail">
						<img src="images/01.jpg" alt='xxx' />
						<span>《秦时明月》系列是由中国杭州玄机科技信息技术有限公司制作的3D武侠动画系列，于2007年春节期间起在中国全国各地正式首映，网络上亦有授权播出。另有衍生出的仅在网络、不在电视播出的姐妹篇《天行九歌》...</span>
					</div>
				</li>

				<li>
					<div class="top">
						<div class="no">2</div>
						<span class="title">天行九歌</span>
					</div>
					<div class="detail">
						<img src="images/02.jpg" alt='xxx' />
						<span>《天行九歌》该动画以韩国公子韩非建立的“流沙”组织为主视角，展开六国对抗秦国的众生百态，使观众进入战国末年风起云涌、群雄并起、百家争鸣的大时代中的故事。</span>
					</div>
				</li>

				<li>
					<div class="top">
						<div class="no">3</div>
						<span class="title">斗罗大陆</span>
					</div>
					<div class="detail">
						<img src="images/03.jpg" alt='xxx' />
						<span>《斗罗大陆》唐门外门弟子唐三，因偷学内门绝学为唐门所不容，跳崖明志时却发现没有死，反而以另外一个身份来到了另一个世界，一个属于武魂的世界，名叫斗罗大陆。</span>
					</div>
				</li>

				<li>
					<div class="top">
						<div class="no">4</div>
						<span class="title">一人之下</span>
					</div>
					<div class="detail">
						<img src="images/04.jpg" alt='xxx' />
						<span>《一人之下》是2015年2月26日开始在网络平台腾讯动漫上连载的一部网络漫画作品，作者是米二。 [1] 2016年8月开始由浙江人民美术出版社发售漫画单行本。 [2]
							作品亦改编为同名电视动画。</span>
					</div>
				</li>

				<li>
					<div class="top">
						<div class="no">5</div>
						<span class="title">斗破苍穹</span>
					</div>
					<div class="detail">
						<img src="images/05.jpg" alt='xxx' />
						<span>《斗破苍穹》是一本连载于起点中文网的古装玄幻小说，作者是起点白金作家天蚕土豆（李虎），已完结。这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气！</span>
					</div>
				</li>

				<li>
					<div class="top">
						<div class="no">6</div>
						<span class="title">星辰变</span>
					</div>
					<div class="detail">
						<img src="images/06.jpg" alt='xxx' />
						<span>《星辰变》是在起点中文网上连载的奇幻修真小说，作者是我吃西红柿。小说以一个庞大的修真世界为背景，讲述了主角秦羽不甘于没落、努力修炼跨越先天不足的劣势，一步步踏上强者之路，最终成为鸿蒙掌控者的故事。</span>
					</div>
				</li>

				<li>
					<div class="top">
						<div class="no">7</div>
						<span class="title">墓王之王</span>
					</div>
					<div class="detail">
						<img src="images/07.jpg" alt='xxx' />
						<span>《墓王之王》是河北铸梦文化传播有限公司（简称：铸梦动画）倾力打造的墓派武侠3D网络动画，立足原创高品质动画定位，打造精品IP，开墓派武侠之先河，辟全新类型动画之创举，为国产原创动画再添精品。</span>
					</div>
				</li>

				<li>
					<div class="top">
						<div class="no">8</div>
						<span class="title">西行纪之集结篇</span>
					</div>
					<div class="detail">
						<img src="images/08.jpg" alt='xxx' />
						<span>《西行纪之集结篇》唐三藏师徒四人取得奇经交予天庭的十六年后，如今奇经下落不明，天庭血洗天羽山大肆搜寻，狼妖白狼不辞万难地寻回唐僧师徒，小队集结踏上还经之路……</span>
					</div>
				</li>

				<li>
					<div class="top">
						<div class="no">9</div>
						<span class="title">万界仙踪</span>
					</div>
					<div class="detail">
						<img src="images/09.jpg" alt='xxx' />
						<span>《万界仙踪》家族大会之后，炎绝在逃亡路上被叶星云设局击毙，炎武一族实力骤减。玄冥世家蠢蠢欲动，绑架叶雪云想借机与青羽世家摊牌，却被叶星云安插在宁城的密探羽音发觉，最后叶星云亲自前往玄冥地牢...</span>
					</div>
				</li>

				<li>
					<div class="top">
						<div class="no">10</div>
						<span class="title">武庚纪</span>
					</div>
					<div class="detail">
						<img src="images/10.jpg" alt='xxx' />
						<span>最强脑洞封神演义《武庚纪》，是由玄机科技与腾讯视频联合出品，是由杭州玄机科技信息技术有限公司根据香港封神漫画题材改编而来的动画系列，并由著名动画导演沈乐平(《秦时明月》总导演)亲自执导</span>
					</div>
				</li>
			</ul>
		</div>


		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				//初始化只显示第一个动漫详细信息
				for (var i = 1; i < $('.detail').length; i++) {
					$('.detail').eq(i).hide();
				}

				//排他显示鼠标进入的动漫详细信息
				$('li').mouseenter(function() {
					var i = $('li').index(this);
					$('li').eq(i).children('.detail').show();
					$('li').eq(i).siblings().children('.detail').hide();
				})
			})
		</script>
	</body>
</html>

Less:

.container{
	width: 300px;
	height: 581px;
	margin: 50px auto;
	padding: 0 10px;
	border: 1px solid #cccccc;
	overflow: hidden;
	
	.title{
		height: 50px;
		line-height: 50px;
		color: #f23d7c;
		font-size: 19px;
		font-weight: bold;
		border-bottom: 1px dashed #ccc;
	}
	
	ul{
		li{
			display: flex;
			flex-flow: row wrap;
			justify-content: flex-start;
			align-content: flex-start;
			padding: 10px 0 0 0;
			border-bottom: 1px dashed #ccc;
			
			.top{
				display: flex;
				flex-flow: row nowrap;
				justify-content: flex-start;
				align-items: center;
				height: 20px;
				margin: 0 0 10px 0;
				// background-color: orange;
				
				.no{
					width: 20px;
					height: 20px;
					line-height: 20px;
					text-align: center;
					font-size: 12px;
					color: white;
					margin: 0 10px 0 0;
					background-color: #f23d7c;
				}
				
				.title{
					font-size: 12px;
					font-weight: normal;
					color: black;
					border: none;
				}
			}
			
			.detail{
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-between;
				margin: 0 0 10px 0;
				// display: none;
				
				img{
					width: 75px;
					height: 110px;
					margin: 0 5px 0 0;
				}
				
				span{
					width: 200px;
					font-size: 12.5px;
					// background-color: skyblue;
				}
				
			}
			
			// 排行榜从第四到末尾的编号背景色变灰
			&:nth-child(n+4){
				.top{
					.no{
						background-color: #666666;
					}
				}
			}
		}
	}
}

在这里插入图片描述

使用jQuery实现电影排行榜
u_u2020的博客
08-26 610
我们先放一个div，给他一个类为box并且我们给他一些样式：width:670px; border:2px solid #b200ff; margin:50px auto;，在div里面我们分了两部分，分别为标题和内容部分。 标题我们放一个h1标签，里面的文本为:电影排行榜，我们给他一些样式为：padding:10px 20px; margin:0; color:#00ffff; border-bottom:2px solid #b200ff; box-sizing:border-box; ...
jquery应用--仿搜索热点排名
qq_37635519的博客
05-16 677
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> *{ margin:0; ...
jQuery——排行榜
qq_41973154的博客
09-04 924
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>电影排行榜</title> <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></scr...
用jQuery实现排行榜（so easy！！！）
qq_45473786的博客
04-20 4308
排行榜的实现原来如此简单！！！
jQuery排行榜列表文字向上间歇滚动.zip
07-11
实现效果： jQuery排行榜列表文字向上间歇滚动，实现信息的滚动特效，例如学校网站，毕业了已经在工作的，实现学生信息的滚动，实现中奖名单的滚动显示，非常适用于培训网站，企业网站或者商城网站。
jQuery电影排行榜
li840793179的博客
03-29 1105
今天我所做的是一个简单的电影排行榜。 首先我先构造电影排行榜的基本框架！ 其次是css样式的书写！ 最后的功能实现是靠导入的官方的jQuery插件！ 最后的效果是，当你鼠标移动到电影名称的时候该电影的简介介绍会展示出来！ ...
jQuery排行榜列表文字向上间歇滚动特效代码
03-20
【jQuery排行榜列表文字向上间歇滚动特效代码】是一种常见的网页动态效果，用于展示排行榜或榜单信息，例如音乐、电影、游戏等领域的热门排名。这种特效能够吸引用户注意力，提高信息的可读性和用户体验。实现这一...
jQuery实现排行榜文字间歇滚动特效教程
在本案例中，jQuery 被用来实现一个特定的动画效果：文字在排行榜列表中向上滚动，并且以间歇的方式显示。这可以通过结合使用 jQuery 的 `animate()` 方法和定时器（如 `setInterval()`）来完成。具体实现上，可能...
jQuery排行榜列表文字向上间歇滚动代码.zip
07-04
这个“jQuery排行榜列表文字向上间歇滚动代码”就是一个使用jQuery实现的特效，它主要用于动态展示排行榜列表中的文字，通过向上滚动的方式吸引用户的注意力，常应用于新闻网站、电商榜单或者实时更新的数据展示。...
jQuery手机排行榜滑动切换特效实现
资源摘要信息:"jQ手机排行榜标题滑动切换特效代码是为手机网站设计的一款基于jQuery的插件代码。该代码主要用于实现一个排行榜的标题滑动切换效果，以动态展示手机排行信息。在移动设备上，尤其在有限的屏幕上，这种...
jQuery编写网页版2048小游戏共7页.pdf.zip
10-30
【jQuery编写网页版2048小游戏】是一个利用JavaScript库jQuery实现的互动游戏，它基于意大利开发者Gabriele Cirulli的原版2048游戏。2048游戏是一个数字合并的游戏，玩家通过上下左右滑动屏幕，使得相同数字的方块...
jQuery文字排名轮播代码
05-28
jQuery文字排名轮播代码基于jquery.1.10.2.min.js制作，适用于报名信息，文字上下滚动代码。
85、jQ手机排行榜标题滑动切换代码
04-14
85、jQ手机排行榜标题滑动切换代码
使用jQuery实现电影排行榜效果
weixin_44337528的博客
06-30 464
先附上效果图 当我们把鼠标移入电影条目的时候（效果图如下） 实现代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>34_jquery实现电影排行榜上.html</title> <script sr...
jQuery之实现电影排行榜
Richard_666的博客
05-11 629
mr.Xiong使用jQuery实现电影排行榜的效果
weixin_55034312的博客
05-01 261
使用jQuery实现电影排行榜的效果 首先我们就要来给电影排行榜布局，先用一个大的盒子来装里面带的内容，再用h2标签包含电影排行榜作为标题，最后再用ul>li（无序列表）标签来装需要显示的图片和文字内容，布局完之后再给其设置样式，让我们需要隐藏的图片或者内容先隐藏，可以用display:none;将其隐藏用一个on的类来装着， ...
jQuery实现电影排行榜
小白小白从不日别的博客
11-09 261
* { margin: 0; padding: 0; } .box { width: 300px; height: 450px; margin: 50px auto; border: 1px solid #000; } .box>h1 { ...
JQuery实现电影排行榜
helloWolrldApe的博客
03-14 2172
JQuery实现电影排行榜 这段时间一直在学习jquery,发现jquery确实功能强大，相对于js来说
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值