利用jQuery实现水平滑动手风琴切换特效



8 31 11



特效描述:利用jQuery实现 水平滑动 手风琴 切换特效,利用jQuery实现水平滑动手风琴切换特效

代码结构

1. 引入CSS

<link href="css/style.css" type="text/css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

3. HTML代码

<div class="cloud-product-box">
	<div class="cloud-product-wrapper">
		<div class="cloud-product">
			<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>
<script type="text/javascript">
$(document).ready(function(){
	var c=1;																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																													
	$(".cloud-product-ul>li").mouseenter(function(){
		var e=$(this);
		c=e.data("index");
		var e=$(this);
		setTimeout(function(){
			if(c==e.data("index")){
				$(".cloud-product-ul>li").removeClass("active");
				e.addClass("active")
			}
		},120)
	});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动选项卡 滑动切换 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到