jq手风琴+蒙层案例效果

最新推荐文章于 2024-10-11 17:39:47 发布

abstract-person

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量54

点赞数 3

文章标签： javascript html5 css jquery

本文链接：https://blog.csdn.net/m0_74895600/article/details/132122388

版权

本文介绍了如何使用HTML、CSS和JavaScript（配合jQuery）创建一个具有动态效果的手风琴图片切换组件，当鼠标悬停在列表项上时，图片会扩大并展示下一张图片的简要描述。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

总结

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>手风琴特效</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background-color: #292929
			}

			ul li,
			ul ol {
				list-style: none;
			}

			i,
			b,
			em,
			strong {
				font-style: normal;
			}

			img {
				display: block;
				background-size: cover;
			}

			.box ul {
				position: relative;
				overflow: hidden;
				width: 910px;
				height: 306px;
				margin: 60px auto 0;
			}

			.box ul li {
				float: left;
				width: 108px;
				overflow: hidden;
				height: 100%;
				position: relative;
				cursor: pointer;
			}

			.box ul li a {
				display: block;
				width: 100%;
				height: 100%;
			}

			.box ul li .layer {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				background: rgba(27, 29, 36, 0.75);
				height: 100%;
			}

			.box ul li .layer .p1 {
				position: absolute;
				bottom: 5px;
				left: 10px;
			}

			.box ul li .layer .p2 {
				position: absolute;
				bottom: 5px;
				right: -200%;
			}

			.box ul li .layer .p2 b,
			.box ul li .layer .p2 span {
				display: block;
				font-weight: bold;
				font-size: 20px;
			}

			.box ul li .layer .p1 b,
			.box ul li .layer .p1 span {
				display: block;
				font-weight: bold;
				font-size: 14px;
			}

			.col1 {
				color: #00A39A;
			}

			.col2 {
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li class="cur">
					<a href="javascript:;"><img src="images/renwu1.jpg" alt=""></a>
					<div class="layer">
						<p class="p1"><b class="col1">天空与少女</b><span class="col2">NO.1</span></p>
					</div>
				</li>
				<li>
					<a href="javascript:;"><img src="images/renwu2.jpg" alt=""></a>
					<div class="layer">
						<p class="p1"><b class="col1">水下的少女</b><span class="col2">NO.2</span></p>
					</div>
				</li>
				<li>
					<a href="javascript:;"><img src="images/renwu3.jpg" alt=""></a>
					<div class="layer">
						<p class="p1"><b class="col1">美少女</b><span class="col2">NO.3</span></p>
					</div>
				</li>
				<li>
					<a href="javascript:;"><img src="images/renwu4.jpg" alt=""></a>
					<div class="layer">
						<p class="p1"><b class="col1">海边的少女</b><span class="col2">NO.4</span></p>
					</div>
				</li>
				<li>
					<a href="javascript:;"><img src="images/renwu5.jpg" alt=""></a>
					<div class="layer">
						<p class="p1"><b class="col1">夏日美少女</b><span class="col2">NO.5</span></p>
					</div>
				</li>
				<li>
					<a href="javascript:;"><img src="images/renwu6.jpg" alt=""></a>
					<div class="layer">
						<p class="p1"><b class="col1">九尾狐</b><span class="col2">NO.6</span></p>
					</div>
				</li>
				<li>
					<a href="javascript:;"><img src="images/renwu7.jpg" alt=""></a>
					<div class="layer">
						<p class="p1"><b class="col1">夏日清新</b><span class="col2">NO.7</span></p>
					</div>
				</li>
			</ul>
		</div>
		<script src="js/jquery.js"></script>
		<script>
			$(function() {
				$("li").hover(function() {
					$(this).stop().animate({
						width: 246,
					}).find(".layer").stop();
					$(this).find(".layer").animate({
						height: "18%"
					})
					$(this).siblings("li").stop().animate({
						width: 108,
					}).find(".layer").stop()
				}, function() {
					$("li").stop().animate({
						width: 108
					})
					$("li").find(".layer").height("100%").stop()
				})
			});
		</script>
	</body>
</html>