jQuery 写手风琴

最新推荐文章于 2024-07-25 15:44:34 发布

sqxka

最新推荐文章于 2024-07-25 15:44:34 发布

阅读量106

点赞数

文章标签： jquery css html html5 javascript

本文链接：https://blog.csdn.net/weixin_46390620/article/details/104742974

版权

手风琴
基本代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>手风琴</title>
		<script src="js/jquery-1.11.3.min.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			img {
				border: none;
				display: block;
			}

			#acc {
				width: 640px;
				height: 140px;

				margin: 0 auto;
			}

			#acc ul {
				border-left: 1px solid #ddd;
				height: 140px;
				position: relative;
			}

			#acc ul li {
				width: 50px;
				height: 138px;
				border: 1px solid #ddd;
				float: left;
				list-style: none;
				border-left: 0;
				position: relative;
				overflow: hidden;
			}

			#acc ul li.active {
				width: 434px;
			}

			#acc ul li h3 {
				font-size: 14px;
				color: #000;
				font-weight: 100;
				width: 14px;
				height: 98px;
				padding: 40px 18px 0;

			}

			#acc ul li h3.active {
				background: #f42760;
				color: #fff;
			}

			#acc ul li div {
				width: 383px;
				height: 138px;
				background: blue;
				position: absolute;
				top: 0;
				left: 50px;
				border-left: 1px solid #ddd;
				z-index: 0;
			}

			#acc ul li img {
				width: 383px;
				height: 138px;
			}

			#acc ul li.last {
				position: absolute;
				top: 0;
				right: 0;
			}
		</style>
	</head>

	<body>
		<div id="acc">
			<ul>
				<li class="active">
					<h3 class="active">红玫瑰</h3>
					<div><img src="img/bg1.jpg" /></div>
				</li>
				<li>
					<h3>白玫瑰</h3>
					<div><img src="img/bg2.jpg" /></div>
				</li>
				<li>
					<h3>白玫瑰</h3>
					<div><img src="img/bg3.jpg" /></div>
				</li>
				<li>
					<h3>白玫瑰</h3>
					<div><img src="img/bg4.jpg" /></div>
				</li>
				<li class="last">
					<h3>白玫瑰</h3>
					<div><img src="img/bg5.jpg" /></div>
				</li>
			</ul>

		</div>


		<script type="text/javascript">
			$(function() {
				//鼠标移动到li上,li宽度变434px，h3添加类名,其他li宽度变50px.h3删除类名.
				$('#acc li').mouseover(function() {
					$(this).stop().animate({
							'width': '434px'
						}, 1000)
						.find('h3').addClass('active')
						.end().siblings().stop().animate({
							'width': '50px'
						}, 1000)
						.find('h3').removeClass('active')
				})

			})
		</script>
	</body>
</html>

sqxka

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 写手风琴

手风琴基本代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>手风琴</title> <script src="js/jquery-1.11.3.min.js"></script> <style...
复制链接

扫一扫