jQuery滑动手风琴内容切换效果

释放双眼,带上耳机,听听看~!

好多人在咨询,做一个手风琴切换效果怎么做?今天梦梦给大家源码教授一下哦。

html代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>凡人云-凡人皆可 极速上云</title>

</head>

<body>

<div class="cloud-product-box">
	<div class="cloud-product-wrapper">
	<div class="cloud-product">
		<p class="cloud-product-title"><span>提供国内顶尖、快速、稳定的云计算产品</span></p>
		<p class="cloud-product-explain">计算、存储、监控、安全,完善的云产品满足您的一切所需</p>
		<ul class="cloud-product-ul clearfix">
			<li data-index="1" class="active">
				<div class="normal-inner">
					<div class="cloud-product-single-bottom clearfix">
						<div class="empty-space">
							<div class="bg-product-pic server-header-01"></div>
						</div>
					<h2 class="product-introduce-title">云服务器</h2>
						<p class="product-introduce-content">极速稳定高弹性的计算服务</p>
						<div class="product-introduce-list">
						<p class="introduce-list-small">强大的计算性能</p>
						<p class="introduce-list-small">弹性的按需扩展</p>
						<p class="introduce-list-small">更低的网络时延</p>
					</div>
					<p class="product-introduce-price">
					<span class="price-blue">49</span>元 /月起
							</p>
						</div>
					</div>
			<div class="active-inner active-inner-01 clearfix">
			<div class="active-inner-item">
				<a class="introduce-link" target="_blank" href="#"></a>
				<div class="empty-space">
			<div class="bg-product-pic server-header-active-01"></div>
			</div>
	<h2 class="product-introduce-title active-product-introduce-title ">云服务器</h2>
	<p class="product-introduce-content">极速稳定高弹性的计算服务</p>
			<div class="product-introduce-list">
			<p class="introduce-list-large">采用由数据切片技术构建的三层存储功能,切实保护客户数据的安全。同时可弹性扩展的资源用量,为客户业务在高峰期的顺畅保驾护航
							</p>
					</div>
			<p class="product-introduce-price">
			<span class="price-white">49</span>元 /月起
			</p>
		<a target="_blank" href="#" class="btn buy-link-btn">立即选购</a>
						</div>
					</div>
				</li>
		<li data-index="2">
		<div class="normal-inner">
		<div class="cloud-product-single-bottom clearfix">
				<div class="empty-space">
					<div class="bg-product-pic  server-header-02"></div>
							</div>
					<h2 class="product-introduce-title">服务器托管</h2>
					<p class="product-introduce-content">安全贴心高品质的托管服务</p>
					<div class="product-introduce-list">
						<p class="introduce-list-small">完善的机房设施</p>
						<p class="introduce-list-small">领先的硬件支持</p>
						<p class="introduce-list-small">独有的骨干网络</p>
							</div>
					<p class="product-introduce-price">
								<span class="price-blue">450</span>元 /月起
					</p>
						</div>
					</div>
			<div class="active-inner active-inner-02 clearfix">
			<div class="active-inner-item">
							<a class="introduce-link" target="_blank" href="#"></a>
							<div class="empty-space">
								<div class="bg-product-pic server-header-active-02"></div>
							</div>
							<h2 class="product-introduce-title active-product-introduce-title">服务器托管</h2>
							<p class="product-introduce-content">安全贴心高品质的托管服务</p>
							<div class="product-introduce-list">
								<p class="introduce-list-large">
									T3+级别数据中心,具备完善的机房设施,自建光纤网络,独有的核心骨干网络有效保证高品质的网络环境和丰富的带宽资源
								</p>
							</div>
							<p class="product-introduce-price">
								<span class="price-white">450</span>元 /月起
							</p>
							<a target="_blank" href="#" class="btn buy-link-btn">立即选购</a>
						</div>
					</div>
				</li>
				<li data-index="3">
					<div class="normal-inner">
						<div class="cloud-product-single-bottom clearfix">
							<div class="empty-space">
								<div class="bg-product-pic  server-header-03"></div>
							</div>
							<h2 class="product-introduce-title">云虚拟主机</h2>
							<p class="product-introduce-content">基于云计算的虚拟主机服务</p>
							<div class="product-introduce-list">
								<p class="introduce-list-small">卓越的性能体验</p>
								<p class="introduce-list-small">出色的防御能力</p>
								<p class="introduce-list-small">丰富的带宽资源</p>
							</div>
							<p class="product-introduce-price">
								<span class="price-blue">7</span>元 /月起
							</p>
						</div>
					</div>
					<div class="active-inner active-inner-03 clearfix">
						<div class="active-inner-item">
							<a class="introduce-link" target="_blank" href="#"></a>
							<div class="empty-space">
								<div class="bg-product-pic server-header-active-03"></div>
							</div>
							<h2 class="product-introduce-title active-product-introduce-title ">云虚拟主机</h2>
							<p class="product-introduce-content">基于云计算的虚拟主机服务</p>
							<div class="product-introduce-list">
								<p class="introduce-list-large">
									架设在云高可用云服务器之上,具备高在线率、高安全性、高稳定性等多项优势,提供独立IP,特别适用于对网站运行质量有较高要求的用户
								</p>
							</div>
							<p class="product-introduce-price">
								<span class="price-white">7</span>元 /月起
							</p>
							<a target="_blank" href="#" class="btn buy-link-btn">立即选购</a>
						</div>
					</div>
				</li>
				<li data-index="4">
					<div class="normal-inner">
						<div class="cloud-product-single-bottom clearfix">
							<div class="empty-space">
								<div class="bg-product-pic  server-header-04"></div>
							</div>
							<h2 class="product-introduce-title">SSL证书</h2>
							<p class="product-introduce-content">提供一站式的证书部署服务</p>
							<div class="product-introduce-list">
								<p class="introduce-list-small">顶级CA机构授权颁发</p>
								<p class="introduce-list-small">加密保护数据传输安全</p>
								<p class="introduce-list-small">支持所有浏览器和移动设备</p>
							</div>
							<p class="product-introduce-price">
								<span class="price-blue">1</span>元 /年起
							</p>
						</div>
					</div>
					<div class="active-inner  active-inner-04 clearfix">
						<div class="active-inner-item">
							<a class="introduce-link" target="_blank" href="#"></a>
							<div class="empty-space">
								<div class="bg-product-pic server-header-active-04"></div>
							</div>
							<h2 class="product-introduce-title active-product-introduce-title ">SSL证书</h2>
							<p class="product-introduce-content">提供一站式的证书部署服务</p>
							<div class="product-introduce-list">
								<p class="introduce-list-large">
									实现网站HTTPS化,使网站可信,防劫持、防篡改、防监听。并对云上证书进行统一生命周期管理,简化证书部署,一键分发到云上产品
								</p>
							</div>
							<p class="product-introduce-price">
								<span class="price-white">1</span>元 /年起
							</p>
							<a target="_blank" href="#" class="btn buy-link-btn">立即选购</a>
						</div>
					</div>
				</li>
				<li data-index="5">
					<div class="normal-inner">
						<div class="cloud-product-single-bottom clearfix">
							<div class="empty-space">
								<div class="bg-product-pic server-header-05"></div>
							</div>
							<h2 class="product-introduce-title">域名注册</h2>
							<p class="product-introduce-content">提供五星级的域名注册服务</p>
							<div class="product-introduce-list">
								<p class="introduce-list-small">域名实时过户</p>
								<p class="introduce-list-small">智能双线解析</p>
								<p class="introduce-list-small">whois隐私保护</p>
							</div>
							<p class="product-introduce-price">
								<span class="price-blue">15</span>元 /年起
							</p>
						</div>
					</div>
					<div class="active-inner active-inner-05 clearfix">
						<div class="active-inner-item">
							<a class="introduce-link" target="_blank" href="#"></a>
							<div class="empty-space">
								<div class="bg-product-pic server-header-active-05"></div>
							</div>
							<h2 class="product-introduce-title active-product-introduce-title ">域名注册</h2>
							<p class="product-introduce-content">提供五星级的域名注册服务</p>
							<div class="product-introduce-list">
								<p class="introduce-list-large">
									超高的解析响应速度,强大的域名自助管理平台,免费的域名隐私保护服务,坚持让您花少量的费用,享更好的产品和服务
								</p>
							</div>
							<p class="product-introduce-price">
								<span class="price-white">15</span>元 /年起
							</p>
							<a target="_blank" href="#" class="btn buy-link-btn">立即选购</a>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>

css代码如下:

*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}

.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
*html .clearfix{height:1%}

.btn{display:inline-block;width:100px;height:32px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;line-height:32px;color:#009FD9;text-align:center;text-decoration:none;font-size:14px;cursor:pointer}

.cloud-product-box{background:#f4f4f4}
.cloud-product-wrapper{margin:0 auto;width:1200px}
.cloud-product{position:relative;z-index:9;padding:110px 0 80px}
.cloud-product-title{height:32px;text-align:center;line-height:32px;font-size:32px;color:#333}
.color-blue{color:#009fd9}
.cloud-product-explain{margin-top:26px;margin-bottom:82px;height:16px;line-height:16px;text-align:center;font-size:16px;color:#999}
.cloud-product-ul{width:100%}
.cloud-product-ul li{position:relative;margin-left:12px;width:212px;height:522px;float:left;background:#fff}
.cloud-product-ul li:first-child{margin-left:0}
.cloud-product-single-top{width:100%;height:60px;line-height:60px;text-align:center;background-color:#f2f2f2}
.cloud-product-name{font-size:18px;color:#333;font-weight:700}
.cloud-product-single-bottom{width:100%;height:340px}
.empty-space{width:100%;height:99px;padding:26px 0 0 0;}
.single-bottom-item{height:340px;width:100%}
.single-bottom-item:first-child{border-right:1px solid #eee}
.bg-product-pic{width:100%;height:82px}
.server-header-01{background:url(../img/product_header_icon_01.png) center no-repeat}
.server-header-02{background:url(../img/product_header_icon_02.png) center no-repeat}
.server-header-03{background:url(../img/product_header_icon_03.png) center no-repeat}
.server-header-04{background:url(../img/product_header_icon_04.png) center no-repeat}
.server-header-05{background:url(../img/product_header_icon_05.png) center no-repeat}
.server-header-active-01{background:url(../img/product_header_active_icon_01.png) center no-repeat}
.server-header-active-02{background:url(../img/product_header_active_icon_02.png) center no-repeat}
.server-header-active-03{background:url(../img/product_header_active_icon_03.png) center no-repeat}
.server-header-active-04{background:url(../img/product_header_active_icon_04.png) center no-repeat}
.server-header-active-05{background:url(../img/product_header_active_icon_05.png) center no-repeat}

.product-introduce-title{margin-bottom:14px;height:22px;line-height:22px;font-size:22px;text-align:center}
.product-introduce-title.normal-weight{font-weight:400}
.product-introduce-content{margin:0 auto 26px;width:180px;line-height:14px;font-size:14px;text-align:center;color:#999}
.product-introduce-list{margin:0 auto;padding-top:28px;height:135px;width:84%;border:1px solid #f1f1f1;border-left:none;border-right:none}
.introduce-list-small{margin-bottom:18px;line-height:14px;font-size:14px;color:#999;text-align:center}
.product-introduce-price{margin:48px auto 0;font-size:14px;text-align:center;color:#333}
.price-blue{color:#0af;font-size:38px}
.normal-inner{transition:all .5s;-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s}
.active-inner{position:relative;display:none;height:100%;-moz-opacity:0;-khtml-opacity:0;opacity:0;transition:all .5s;-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s}
.introduce-link{position:absolute;top:0;left:0;width:100%;height:360px}
.active-inner-01{background:url(../img/producet_bg_01.jpg) center no-repeat}
.active-inner-02{background:url(../img/producet_bg_02.jpg) center no-repeat}
.active-inner-03{background:url(../img/producet_bg_03.jpg) center no-repeat}
.active-inner-04{background:url(../img/producet_bg_04.jpg) center no-repeat}
.active-inner-05{background:url(../img/producet_bg_05.jpg) center no-repeat}
.cloud-product-ul li.active .active-inner{display:block;-moz-opacity:1;-khtml-opacity:1;opacity:1}
.cloud-product-ul li.active .normal-inner{display:none;-moz-opacity:0;-khtml-opacity:0;opacity:0}
.cloud-product-ul li{-webkit-box-shadow:1px 1px 12px rgba(0,0,0,.08);-moz-box-shadow:1px 1px 12px rgba(0,0,0,.08);box-shadow:1px 1px 12px rgba(0,0,0,.08);-webkit-transition:width .15s linear;-o-transition:width .15s linear;-moz-transition:width .15s linear;transition:width .15s linear}
.cloud-product-ul li.active{z-index:9;width:304px;-webkit-box-shadow:0 4px 20px rgba(0,0,0,.2);-moz-box-shadow:0 4px 20px rgba(0,0,0,.2);box-shadow:0 4px 20px rgba(0,0,0,.2)}
.active .product-introduce-content{color:#eff6ff}
.active-product-introduce-title{color:#fff}
.active .product-introduce-list{padding-top:22px;border-color:#3f9ff9}
.introduce-list-large{margin:0 auto;width:228px;line-height:22px;color:#ddebff;font-size:14px}
.active .product-introduce-price{margin-top:32px;color:#fefeff}
.product-introduce-price .price-white{display:inline-block;font-size:36px;height:36px;line-height:36px;color:#fff}
.buy-link-btn{display:block;margin:30px auto 0;width:90%;height:40px;line-height:40px;background-color:#ff9600;color:#fff;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
.buy-link-btn:hover{background-color:#f80}

JavaScript代码如下:

整体效果如下:

手风琴切换效果

源码地址:

给TA买糖
共{{data.count}}人
人已赞赏
技术教程

虚拟主机怎么搭建网站

2021-7-23 10:51:42

技术教程

用QQ打开网站链接时提示“当前网页非官方页面”解决办法

2021-7-30 11:17:41

⚠️
筑梦网所有图片均是用户投稿及网上搜集,仅供网友学习交流,未经作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 QQ: 97137161 或者 留言反馈 ,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索