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



163 649 217



特效描述: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>



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


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 收缩展开 展开收缩 收缩 展开 其他 图片切换 图片选项卡 图标选项卡 图片收缩展开 图片收缩 图片展开 文字切换 文字选项卡 滑动手风琴 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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