jQuery網站產品手風琴滑動切換代碼



89 352 118



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

加群請備注:從官網了解到

湖北30选5开奖结果走势图表