jQuery鼠标经过水平手风琴展开收缩动画效果



206 822 275



特效描述:jQuery 鼠标经过 水平手风琴 展开收缩 动画效果,jQuery蓝色的手风琴动画,鼠标经过展开收缩文字内容动画效果。

代码结构

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

<script type="text/javascript">
$(function() {
    $("#cardArea").cardArea()
});
</script>
<ul id="cardArea" class="card-area clearfix">
	<li class="card-item active">
		<div class="card">
			<div class="card-title title-even">
				<div class="content">
					<div class="zq-product-img">
						<i class="zq-icon icon40x40 crad-area-icon1"></i>
					</div>
					<h1>网站与门户</h1>
					<p class="short-info">连接内外  覆盖多端</p>
				</div>
			</div>
			<div class="card-content content-first bg-e8e8e8">
				<ul class="content-first-list">
					<li>全网门户</li>
					<li>企业域名</li>
				</ul>
			</div>
			<div class="card-content content-second">
				<div class="main-info">
					<a href="#" target="_blank" class="no-effect">
						<p class="main-head">全网门户</p>
					</a>
					<p class="main-tip">全网企业客户触达、获取商机、达成业务</p>
					<p class="main-desc">使用企业门户进行客户信息管理、销售线索管理,让您随时随地更轻松地获取新的潜在客户,更快捷地完成业务。</p>
					<a href="#" target="_blank">
					<button class="main-btn">了解详情</button>
					</a>
				</div>
				<ul class="other-info clearfix">
					<li class="other-info-list">
						<a href="#" target="_blank" class="no-effect">
							<h3 class="other-head">企业域名</h3>
							<p class="other-desc">注域名,享安全服务</p>
						</a>
						<i class="zq-icon icon17x17 c-a-arrow"></i>
					</li>
				</ul>
			</div>
		</div>
	</li>
	<li class="card-item">
		<div class="card">
			<div class="card-title title-even">
				<div class="content">
					<div class="zq-product-img">
						<i class="zq-icon icon40x40 crad-area-icon2"></i>
					</div>
					<h1>营销与推广</h1>
					<p class="short-info">全景覆盖  经济之选</p>
				</div>
			</div>
			<div class="card-content content-first bg-e1e1e1">
				<ul class="content-first-list">
					<li>营销宝</li>
					<li>大把推</li>
					<li>易米通</li>
					<li>Google Adwords</li>
				</ul>
			</div>
			<div class="card-content content-second">
				<div class="main-info">
					<a href="#" target="_blank" class="no-effect">
						<p class="main-head">营销宝</p>
					</a>
					<p class="main-tip">多场景营销智能工具集</p>
					<p class="main-desc">使用中企营销宝进行营销,不论是活动组织、营销推广,还是企业宣传、产品售卖、热点跟踪,让您随时随地便捷的开展营销,提升品牌形象与影响力。</p>
					<a href="/market/" target="_blank">
					<button class="main-btn">了解详情</button>
					</a>
				</div>
				<ul class="other-info clearfix">
					<li class="other-info-list">
						<a href="#" target="_blank" class="no-effect">
							<h3 class="other-head">大把推</h3>
							<p class="other-desc">让更多客户找到你</p>
						</a>
						<i class="zq-icon icon17x17 c-a-arrow"></i>
					</li>
					<li class="other-info-list">
						<a href="#" target="_blank" class="no-effect">
							<h3 class="other-head">易米通</h3>
							<p class="other-desc">国内创新的数字营销平台</p>
						</a>
						<i class="zq-icon icon17x17 c-a-arrow"></i>
					</li>
					<li class="other-info-list">
						<a href="#" target="_blank" class="no-effect">
							<h3 class="other-head">Google Adwords</h3>
							<p class="other-desc">助力您的海外拓金之路</p>
						</a>
						<i class="zq-icon icon17x17 c-a-arrow"></i>
					</li>
				</ul>
			</div>
		</div>
	</li>
	<li class="card-item">
		<div class="card">
			<div class="card-title title-even">
				<div class="content">
					<div class="zq-product-img">
						<i class="zq-icon icon40x40 crad-area-icon3"></i>
					</div>
					<h1>电商与业务</h1>
					<p class="short-info">在线业务  轻松实现</p>
				</div>
			</div>
			<div class="card-content content-first bg-e8e8e8">
				<ul class="content-first-list">
					<li>ZshopS</li>
				</ul>
			</div>
			<div class="card-content content-second">
				<div class="main-info">
					<a href="#" target="_blank" class="no-effect">
						<p class="main-head">ZshopS</p>
					</a>
					<p class="main-tip">为中小企业搭建独立电商平台,提供行业电商解决方案。</p>
					<p class="main-desc">商城提供安全稳定、易用高效的在线零售管理系统,后台简单易用,购物体验流畅,促销方式灵活,数据统计分析嵌入业务各个环节,根据访问记录深入分析,随时随地呈现统计结果指导决策。帮助传统企业顺利开展线上零售业务,强化数字分析与营销推广,降低业务成本,树立企业品牌,扩大企业收益渠道。</p>
					<a href="#" target="_blank">
					<button class="main-btn">了解详情</button>
					</a>
				</div>
			</div>
		</div>
	</li>
	<li class="card-item">
		<div class="card">
			<div class="card-title title-even">
				<div class="content">
					<div class="zq-product-img">
						<i class="zq-icon icon40x40 crad-area-icon4"></i>
					</div>
					<h1>协同与管理</h1>
					<p class="short-info">连接互通  简便开放</p>
				</div>
			</div>
			<div class="card-content content-first bg-e1e1e1">
				<ul class="content-first-list">
					<li>Z云邮</li>
					<li>有翼云销</li>
				</ul>
			</div>
			<div class="card-content content-second">
				<div class="main-info">
					<a href="#" target="_blank" class="no-effect">
						<p class="main-head">Z云邮</p>
					</a>
					<p class="main-tip">专注企业办公效率的提升,云“游”四海的企业邮箱</p>
					<p class="main-desc">帮企业提高工作效率的企业邮箱:支持微信收发信件、超大企业共享网盘,多维度的邮箱管理功能等。并且,在海外部署了多达34个收发节点,国内部署节点28个,让企业的重要邮件,全球畅“游”。</p>
					<a href="#" target="_blank">
					<button class="main-btn mr20">了解详情</button>
					</a>
					<a href="#" target="_blank">
					<button class="main-white-btn">立即试用</button>
					</a>
				</div>
				<ul class="other-info clearfix">
					<li class="other-info-list">
						<a href="#" target="_blank" class="no-effect">
							<h3 class="other-head">有翼云销</h3>
							<p class="other-desc">有效提升销售业绩和转化率</p>
						</a>
						<i class="zq-icon icon17x17 c-a-arrow"></i>
					</li>
				</ul>
			</div>
		</div>
	</li>
</ul>



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


热门标签: 滑动 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 滑动星星打分 收缩展开 其他 图片切换 图片收缩展开 文字切换 滑动手风琴 手风琴 鼠标滑过

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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