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

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

添加时间:2021-01-31 04:17:59
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:手风琴
  • 模板颜色模板颜色:
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

介绍一款简单实用的手风琴选项切换效果,鼠标滑动可以在各选项之间进行切换,选项切换的过渡效果流畅,整体颜色和布局都很大气。
jQuery鼠标经过水平手风琴展开收缩动画效果
分类:图片代码 > 手风琴 难易:

开始需要引入css样式和javascript插件,body里面直接调用即可生效。

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

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/function.js"></script>
$(function() {
    $("#cardArea").cardArea()
});

选项通过ul和li生成即可,示例如下:

<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="#"  class="no-effect">
						<p class="main-head">全网门户</p>
					</a>
					<p class="main-tip">全网企业客户触达、获取商机、达成业务</p>
					<p class="main-desc">使用企业门户进行客户信息管理、销售线索管理,让您随时随地更轻松地获取新的潜在客户,更快捷地完成业务。</p>
					<a href="#" >
					<button class="main-btn">了解详情</button>
					</a>
				</div>
				<ul class="other-info clearfix">
					<li class="other-info-list">
						<a href="#"  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>
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:jQuery鼠标经过水平手风琴展开收缩动画效果

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.088086s