jQuery基础04

最新推荐文章于 2024-05-31 14:44:29 发布

最爱琴女E

最新推荐文章于 2024-05-31 14:44:29 发布

阅读量90

点赞数

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

本文链接：https://blog.csdn.net/qwq_666/article/details/113726219

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

电影排行榜练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>电影排行榜</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 300px;
				height: 360px;
				margin: 50px auto;
				border: 1px solid #000;
			}
			.box>h1{
				font-size: 20px;
				line-height: 35px;
				color: deeppink;
				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: deeppink;
			}
			ul>li>span{
				display: inline-block;
				width: 20px;
				height: 20px;
				background: #ccc;
				text-align: center;
				line-height: 20px;
			}
			.content>img{
				width: 80px;
				height: 120px;
				float: left;
			}
			.content>p{
				width: 180px;
				height: 120px;
				float: right;
				font-size: 12px;
				line-height: 20px;
			}
			.content{
				overflow: hidden;
				margin-top: 5px;
				display: none;
			}
			.current .content{
				display: block;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				/* //1,监听li的移入事件
				$("li").mouseenter(function(){
					$(this).addClass("current");
				});
				//2.监听li的移出事件
				$("li").mouseleave(function(){
					$(this).removeClass("current");
				}); */
				$("li").hover(function(){
					$(this).addClass("current");
				},function(){
					$(this).removeClass("current");
				});
			});
		</script>
	</head>
	<body>
		<div class="box">
			<h1>电影排行榜</h1>
			<ul>
				<li><span>1</span>《白蛇：缘起》
					<div class="content">
						<img src="../img/白蛇：缘起.jpg" >
						<p>《白蛇：缘起》是由追光动画、华纳兄弟联合出品，的奇幻爱情动画电影。
						影片讲述白素贞在五百年前与许仙的前身阿宣之间一段刻骨铭心的爱情故事。
						影片于2019年1月11日在中国上映。</p>
					</div>
				</li>
				<li><span>2</span>《疯狂动物城》
					<div class="content">
						<img src="../img/疯狂动物城.jpg" >
						<p>《疯狂动物城》是由迪士尼影业出品的3D动画片。
						讲述小镇女青年“兔朱迪”前往大城市展开寻梦之旅，后与看起来一点都不和谐的“狐尼克”组成搭档，
						并破获一桩动物界大案的故事。</p>
					</div>
				</li>
				<li><span>3</span>《天气之子》
					<div class="content">
						<img src="../img/天气之子.jpg" >
						<p>《《天气之子》是由新海诚执导，的奇幻爱情动画电影。
						影片以天气变化混乱的时代为背景，讲述被命运操控的少年与少女，自己“选择”生存方式的故事。
						影片于2019年7月19日在日本上映。</p>
					</div>
				</li>
				<li><span>4</span>《勇敢传说》
					<div class="content">
						<img src="../img/勇敢传说.jpg">
						<p>《勇敢传说》是由马克∙安德鲁斯与布兰达∙查普曼联合执导的动画电影。
						影片以中世纪的苏格兰为舞台，讲述主人公梅莉达抗争传统束缚，为争取自己获得真爱的权利，从而改变自己命运的故事。
						</p>
					</div>
				</li>
				<li><span>5</span>《变身特工》
					<div class="content">
						<img src="../img/变身特工.jpg" >
						<p>《变身特工》是由Troy Quane、Nick Bruno执导的动画片。
						该片讲述了上天入地无所不能的CIA超级特工兰斯，如何因一场意外被新人技术员沃尔特的黑科技变成鸽子的故事。
						</p>
					</div>
				</li>
				<li><span>6</span>《美人鱼之海盗来袭》
					<div class="content">
						<img src="../img/美人鱼.jpg">
						<p>《美人鱼之海盗来袭》是由金川文化出品，邱志强执导的奇幻冒险动画电影。
						该片主要讲述了重生的美人鱼在海上与海盗等人发生的各种冒险故事。
						影片于2015年7月25日在中国上映。
						</p>
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>

Tab选项卡练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 440px;
				height: 550px;
				border: 1px solid #000;
				margin: 50px auto;
			}
			.nav>li{
				list-style: none;
				width: 110px;
				height: 50px;
				background: orange;
				text-align: center;
				line-height: 50px;
				float: left;
			}
			.nav .current{
				background: #ccc;
			}
			.content>li{
				list-style: none;
				display: none;
			}
			.content>.show{
				display: block;
			}
		</style>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				/* //1.监听选项卡的移入事件
				$(".nav>li").mouseenter(function(){
					//修改被移入选项卡的背景颜色
					$(this).addClass("current");
					//获取当前移入选项卡的索引
					var index = $(this).index();
					//根据索引找到对应的图片
					var $li = $(".content>li").eq(index);
					//显示找到的图片
					$li.addClass("show");
				});
				//2.监听选项卡的移出事件
				$(".nav>li").mouseleave(function(){
					//还原被移入选项卡的背景颜色
					$(this).removeClass("current");
					//获取当前移出选项卡的索引
					var index = $(this).index();
					//根据索引找到对应的图片
					var $li = $(".content>li").eq(index);
					//隐藏对应的图片
					$li.removeClass("show");
				}); */
				$(".nav>li").mouseenter(function(){
					//修改被移入选项卡的背景颜色
					$(this).addClass("current");
					//还原其他选项卡的背景颜色
					$(this).siblings().removeClass("current");
					//获取当前移出选项卡的索引
					var index = $(this).index();
					//根据索引找到对应的图片
					var $li = $(".content>li").eq(index);
					//隐藏其他非当前的图片
					$li.siblings().removeClass("show");
					//显示对应的图片
					$li.addClass("show");
				});
			});
		</script>
	</head>
	<body>
		<div class="box">
			<ul class="nav">
				<li class="current">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
			<ul class="content">
				<li class="show"><img src="../img/莱莎.jpg" width="440px" height="500px"></li>
				<li><img src="../img/派翠夏.jpg" width="440px" height="500px"></li>
				<li><img src="../img/賽莉.jpg" width="440px" height="500px"></li>
				<li><img src="../img/科洛蒂亚.jpg" width="440px" height="500px"></li>
			</ul>
		</div>
	</body>
</html>

最爱琴女E

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础04

电影排行榜练习<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>电影排行榜</title> <style> *{ margin: 0; padding: 0; } .box{ width: 300px; height: 360px; margin: 50px auto; bo
复制链接

扫一扫