Nearth===>WEB前端--JQuery/精品美女展示案例

最新推荐文章于 2022-11-19 23:50:29 发布

码字界陈冠希

最新推荐文章于 2022-11-19 23:50:29 发布

阅读量405

点赞数

分类专栏： WEB前端第三季/JQuery

本文链接：https://blog.csdn.net/ly1716/article/details/102785983

版权

WEB前端第三季/JQuery 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

学了这么久的JQuery，是时候做点小小项目了

（该案例需要十二张美女图片，自己去找··················嘿嘿~~~~~）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <title>Nearth</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;
		}
		a{
			text-decoration: none;
		}
		body{
			background-image: url(0.jpg);
	        background-repeat: no-repeat;
			background-attachment: fixed;
		    background-size: 100% 100%;
		}
		div{
			margin-left:10px;
		}
		.beauty{
			width:400px;
			height: 240px;
			overflow: hidden;
		    text-align: center;
		}
		#left,#center,#right{
			float: left;
		}
		#left li,#right li{
			background-color: #FFB6C1;
		}
		#left li a,#right li a{
			display:block;
			width:100px;
			height:40px;
			border-bottom: 1px solid aqua;
			line-height: 40px;
			text-align: center;
			color: black;
		}
		#left li a:hover,#right li a:hover{
			background-color: brown;
		}
		#center{
			border-left: 3px solid orangered;
			border-right: 3px solid orangered;
			border-radius: 2px;
		}
	</style>
	<script>
		$(function(){
			$("#left>li").mouseover(function(){
				var index=$(this).index();
				$("#center>li:eq("+index+")").siblings("li").hide();
				$("#center>li:eq("+index+")").show();
			});
			$("#right>li").mouseover(function(){
				var index=$(this).index()+6;
				$("#center>li:eq("+index+")").siblings("li").hide();
				$("#center>li:eq("+index+")").show();
			});
		});
		

	</script>
</head>
<body>
	<h1 align="center">精品美女展示案列</h1>
	<hr >
<div id="beauty">
	<ul id="left">
		<li><a href="#">西施1号</a></li>
		<li><a href="#">西施1号</a></li>
		<li><a href="#">西施1号</a></li>
		<li><a href="#">西施1号</a></li>
		<li><a href="#">西施1号</a></li>
		<li><a href="#">西施1号</a></li>
	</ul>
	<ul id="center">
		<li><a href="#"><img src="1.jpg"width="200" height="240" ></a></li>
		<li><a href="#"><img src="2.jpg" width="200" height="240"></a></li>
		<li><a href="#"><img src="3.jpg"width="200" height="240" ></a></li>
		<li><a href="#"><img src="4.jpg" width="200" height="240"></a></li>
		<li><a href="#"><img src="5.jpg" width="200" height="240"></a></li>
		<li><a href="#"><img src="6.jpg"width="200" height="240" ></a></li>
		<li><a href="#"><img src="7.jpg" width="200" height="240"></a></li>
		<li><a href="#"><img src="8.jpg"width="200" height="240" ></a></li>
		<li><a href="#"><img src="9.jpg" width="200" height="240"></a></li>
		<li><a href="#"><img src="10.jpg"width="200" height="240" ></a></li>
		<li><a href="#"><img src="11.jpg" width="200" height="240"></a></li>
		<li><a href="#"><img src="12.jpg"width="200" height="240" ></a></li>
	</ul>
	<ul id="right">
		<li><a href="#">貂蝉1号</a></li>
		<li><a href="#">貂蝉1号</a></li>
		<li><a href="#">貂蝉1号</a></li>
		<li><a href="#">貂蝉1号</a></li>
		<li><a href="#">貂蝉1号</a></li>
		<li><a href="#">貂蝉1号</a></li>
	</ul>
</div>

</body>
</html>

感觉做了个小案列，心里有点儿开心···········不知道为什么~~~~~~~~~~~~嘿嘿嘿······

码字界陈冠希

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Nearth===>WEB前端--JQuery/精品美女展示案例

学了这么久的JQuery，是时候做点小小项目了（该案例需要十二张美女图片，自己去找··················嘿嘿~~~~~）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="jquery-3.3.1.min....
复制链接

扫一扫