Nearth===>WEB前端--JQuery/美女手风琴案例

最新推荐文章于 2019-11-16 17:30:09 发布

码字界陈冠希

最新推荐文章于 2019-11-16 17:30:09 发布

阅读量128

点赞数

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

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

版权

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

52 篇文章 0 订阅

订阅专栏

先看效果：（当鼠标经过图片，图片会自动压缩，就像手风琴一样，压缩，伸展）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Nearth</title>
		<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body{
				background-image: url(0.jpg);
			}
			*{
			    margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			div{
				width:1000px;
				height: 200px;
				margin:50px auto;
				border:1px solid red;
				overflow: hidden;
				background-color: #FFB6C1;
			}
			div li{
				width:200px;
				height: 200px;
				float: left;
			}
			div ul{
				width:1300px;
			}
			img{
				width:200px;
				height: 200px;
			}
		</style>
		 <script>
		        $(function () {
		            $("#dv>ul>li").mouseover(function () {
		                $(this).siblings("li").css("width","50px");
		                $(this).css("width","600px");
		            });
		            $("#dv>ul>li").mouseout(function () {
		                $("#dv>ul>li").css("width","200px");
		            });
		        });
		    </script>

	</head>
	<body>
		<h1>-------美女手风琴案例-------</h1>
		<hr style="color: #00FFFF;size:6px;">
		<div id="dv">
			<ul>
				<li><img src="1.jpg" ></li>
				<li><img src="2.jpg" ></li>
				<li><img src="3.jpg" ></li>
				<li><img src="4.jpg" ></li>
				<li><img src="5.jpg" ></li>
			</ul>
		</div>
	</body>
</html>

好好学习，加油奋斗~~~~~~~~~~~~~

码字界陈冠希

关注

0
点赞
踩
1

收藏

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

先看效果：（当鼠标经过图片，图片会自动压缩，就像手风琴一样，压缩，伸展）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Nearth</title> <script src="jquery-3.3.1.min.js" typ...
复制链接

扫一扫