jQuery网站产品手风琴滑动切换代码



86 340 114



特效描述:jQuery网站产品 手风琴滑动切换,jQuery简洁实用的网站产品或案例水平手风琴滑动切换展示代码。这款手风琴适用于企业产品介绍或案例展示切换布局代码。

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css" type="text/css" media="all"/>
<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>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/function.js"></script>

3. HTML代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴展开动画效果</title>
</head>
<body style="background:#f5f5f5;">
<script type="text/javascript">
$(function() {
    $("#cardArea").cardArea()
});
</script>
<ul id="cardArea" class="card-area clearfix">
	<li class="card-item">
		<div class="card">
			<div class="card-title title-even">
				<div class="content"><h1>店铺入驻</h1></div>
			</div>
			<div class="card-content content-first">
				<div style="padding:50px;">结合大数据能力,帮助企业快速搭建各大电商平台</div>
			</div>
			<div class="card-content content-second">
				<div class="main-info">
                	<ul>
                    	<li>
                        	<div class="left">
                            	<p class="tit">店铺购买</p>
                                <p class="hys">国内专业店铺交易平台</p>
                            </div>
                            <div class="right">
                            	<button>查看详情</button>
                            </div>
                        </li>
                    	<li>
                        	<div class="left">
                            	<p class="tit">店铺评估/出售</p>
                                <p class="hys">由专业人员进行评估、交易</p>
                            </div>
                            <div class="right">
                            	<button>查看详情</button>
                            </div>
                        </li>
                    </ul>
				</div>
			</div>
		</div>
	</li>
	<li class="card-item active">
		<div class="card">
			<div class="card-title title-even">
				<div class="content"><h1>店铺交易</h1></div>
			</div>
			<div class="card-content content-first">
				<div style="padding:50px;">结合大数据能力,帮助企业快速搭建各大电商平台</div>
			</div>
			<div class="card-content content-second">
				<div class="main-info">
                	<ul>
                    	<li>
                        	<div class="left">
                            	<p class="tit">店铺购买</p>
                                <p class="hys">国内专业店铺交易平台</p>
                            </div>
                            <div class="right">
                            	<button>查看详情</button>
                            </div>
                        </li>
                    	<li>
                        	<div class="left">
                            	<p class="tit">店铺评估/出售</p>
                                <p class="hys">由专业人员进行评估、交易</p>
                            </div>
                            <div class="right">
                            	<button>查看详情</button>
                            </div>
                        </li>
                    </ul>
				</div>
			</div>
		</div>
	</li>
	<li class="card-item">
		<div class="card">
			<div class="card-title title-even">
				<div class="content"><h1>电商与业务</h1></div>
			</div>
			<div class="card-content content-first">
				<div style="padding:50px;">结合大数据能力,帮助企业快速搭建各大电商平台</div>
			</div>
			<div class="card-content content-second">
				<div class="main-info">
                	<ul>
                    	<li>
                        	<div class="left">
                            	<p class="tit">店铺购买</p>
                                <p class="hys">国内专业店铺交易平台</p>
                            </div>
                            <div class="right">
                            	<button>查看详情</button>
                            </div>
                        </li>
                    	<li>
                        	<div class="left">
                            	<p class="tit">店铺评估/出售</p>
                                <p class="hys">由专业人员进行评估、交易</p>
                            </div>
                            <div class="right">
                            	<button>查看详情</button>
                            </div>
                        </li>
                    </ul>
				</div>
			</div>
		</div>
	</li>
</ul>
</body>
</html>



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


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 其他 清单样式 滑动手风琴 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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