jQuery鼠标经过水平手风琴特效源码下载



8 30 11



特效描述:鼠标经过 水平手风琴,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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


热门标签: 瀑布流 收藏 预览 自适应页面大小 响应式区块列表布局 摇摆 烟花 清单样式 照相机 注释 下划线 结构图 鼠标悬停 条形码 弹幕 画板 朋友圈样式 红包 css绘制样式 支付 图文布局 导航切换 二维码 地图 图片切换 计算器 文字切换 计时器 背景切换 桌面 手风琴 跳转 选项卡自动切换 步骤 视频切换 键盘 列表切换 签到 分享 渐隐切换 点赞 投票 全屏切换 雪花 切换按钮 打印 缩放切换 答题 震动 图表 鼠标滑过 抽奖 表情 qq空间 头像截图 星星打分评分 编辑器 播放器 电子杂志 排行榜 分页翻页 排序 表格隔行变色 table表格 进度条 多功能 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 滑动星星打分 其他更多

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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