jquery 入门练习（购物导图）

路过的灭法

已于 2022-10-12 10:56:10 修改

阅读量168

点赞数 2

文章标签： jquery javascript 前端

于 2022-10-12 10:49:48 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_68946227/article/details/127278107

版权

1.购物导图，要求鼠标在文字滑动会出现与之相对应的图片

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#div {
				margin: 0 auto;
				padding: 0px;
				border: 1px solid pink;
				width: 320px;
				height: 287.6px;
			}

			ul {
				margin: 0px;
				padding: 0px;
				list-style: none;
			}

			img {
				width: 233px;
				height: 282px;
			}

			#right {
				float: right;
				width: 233px;
				height: 282px;
			}

			#left {
				float: left;
				width: 80px;
				height: 250px;
			}

			a {
				display: inline-block;
				width: 80px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				border: 1px solid pink;
				text-decoration: none;
				color: black;
				font-size: 15px;
				background-color: bisque;
			}

			a:hover {
				background-color: peachpuff;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function() {
				$("#right>ul li:first").show().siblings().hide();
				$("#left>ul li").mouseover(function() {
					var index = $(this).index();
					$("#right>ul li:eq(" + index + ")").fadeIn(100).siblings().hide();
				});
			});
		</script>
	</head>
	<body>
		<div id="div">
			<div id="left">
				<ul>
					<li><a href="#">呢大衣</a></li>
					<li><a href="#">雪地靴</a></li>
					<li><a href="#">冬裙</a></li>
					<li><a href="#">女靴</a></li>
					<li><a href="#">毛衣</a></li>
					<li><a href="#">棉服</a></li>
					<li><a href="#">女裤</a></li>
					<li><a href="#">羽绒服</a></li>
					<li><a href="#">牛仔裤</a></li>
				</ul>
			</div>
			<div id="right">
				<ul>
					<li><img src="img/呢大衣.jpg" /></li>
					<li><img src="img/雪地靴.jpg" /></li>
					<li><img src="img/冬裙.jpg" /></li>
					<li><img src="img/女靴.jpg" /></li>
					<li><img src="img/毛衣.jpg" /></li>
					<li><img src="img/棉服.jpg" /></li>
					<li><img src="img/女裤.jpg" /></li>
					<li><img src="img/羽绒服.jpg" /></li>
					<li><img src="img/牛仔裤.jpg" /></li>
				</ul>
			</div>
		</div>
	</body>
</html>

结果如图