使用jQuery完成王者荣耀英雄详情页面

1、导入jQuery库和需要用到的图片

2、代码部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>王者荣耀英雄展示</title>
		<!-- 定义页面标题和编码格式 -->
		<style type="text/css">
			/* 定义全局样式 */
			* {
				margin: 0px;
				padding: 0px;
			}

			li {
				list-style: none;
			}

			/* 定义展示区域样式 */
			#content {
				width: 800px;
				height: 69px;
				background: url(img/bg.png); /* 背景图片 */
				margin: 10px auto;
				padding: 10px;
			}

			/* 定义英雄图标样式 */
			#content ul li {
				width: 69px;
				height: 69px;
				float: left;
				margin-left: 10px;
				overflow: hidden;
				border-radius: 10px; /* 圆角边框 */
			}

			/* 隐藏大图标 */
			.big {
				display: none;
			}

			/* 当前选中的英雄图标样式 */
			#content ul .current {
				width: 224px;
			}

			/* 显示当前英雄的大图标 */
			.current .big {
				display: block;
			}

			/* 定义小图标样式 */
			.small {
				width: 69px;
				height: 69px;
			}
		</style>
	</head>
	<body>
		<!-- 引入 jQuery 库 -->
		<script src="js/jquery.min.js"></script>
		<!-- 定义 JavaScript 代码 -->
		<script>
			$(function(){
				$("#content ul li").mouseover(function(){
					$(this).animate({
						width:224, /* 当前选中的英雄图标宽度 */
					}).find(".big").fadeIn().siblings().stop().hide(); /* 显示当前英雄的大图标 */
					$(this).siblings().stop().animate({
						width:69, /* 非选中的英雄图标宽度 */
					}).find(".big").stop().hide().siblings().stop().fadeIn(); /* 显示非选中英雄的小图标 */
				})
			})
		</script>

		<!-- 定义页面内容 -->
		<div id="content">
			<ul>
				<!-- 定义英雄图标 -->
				<li class="current"><img src="img/c.png" class="big"> <!-- 大图标 -->
					<img src="img/c1.jpg" class="small"> <!-- 小图标 -->
				</li>
			
				<li><img src="img/h.png" class="big">
					<img src="img/h1.jpg" class="small">
				</li>
			
				<li><img src="img/l.png" class="big">
					<img src="img/l1.jpg" class="small">
				</li>
			
				<li><img src="img/m.png" class="big">
					<img src="img/m1.jpg" class="small">
				</li>
			
				<li><img src="img/t.png" class="big">
					<img src="img/t1.jpg" class="small">
				</li>
			
				<li><img src="img/w.png" class="big">
					<img src="img/w1.jpg" class="small">
				</li>
			
				<li><img src="img/z.png" class="big">
					<img src="img/z1.jpg" class="small">
				</li>
			</ul>
		</div>
	</body>
</html>
使用jQuery完成王者荣耀英雄详情页面

1、导入jQuery库和需要用到的图片

2、代码部分

猜你喜欢
