JQuery——小练习题

骑猪看日落 2024-04-03 11:43 70阅读 0赞

<!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;
    				overflow: hidden;
    			}
    
    			#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;
    				font-family: "宋体";
    				background-color: beige;
    				font-weight: 600;
    			}
    
    			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(500).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>

效果图：

![e63e370f777244d7a179643de97d431f.png][]![ea99486a739546e4b157aa12c2adaacd.png][]

[e63e370f777244d7a179643de97d431f.png]: https://img-blog.csdnimg.cn/e63e370f777244d7a179643de97d431f.png
[ea99486a739546e4b157aa12c2adaacd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/49e9ce9c570242a2973751b5c07393ab.png