QQ客服
當前位置 : 首頁 > 代碼 > 網頁特效 > 選項卡/滑動門 > 建站功能介紹tab圖文布局

原創商用 建站功能介紹tab圖文布局

jQuery基于css3屬性制作建站小程序功能特點介紹,帶索引按鈕控制圖文布局動畫演示代碼。這是一款簡潔的產品特點圖文tab切換布局。
分享到微信朋友圈
X
[聲明]該素材是本站付費買斷的作品代碼,享受著作權保護,未經允許請勿轉載,否則追究相應的法律責任。

使用方法:

1、head引入css文件

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

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代碼

<div class="gongneng">
	<div class="gongneng_main" id="gongneng_main">
		<div class="Small_tedian_tit">建站小程序功能特點</div>
		<div class="gongneng_tab">
			<div class="gongneng_tabmin">
				<div class="gongneng_click cur"><i></i><b>1</b></div>
				<div class="gongneng_click"><i></i><b>2</b></div>
				<div class="gongneng_click"><i></i><b>3</b></div>
				<div class="gongneng_click"><i></i><b>4</b></div>
				<div class="gongneng_click"><i></i><b>5</b></div>
				<div class="gongneng_click"><i></i><b>6</b></div>
				<div class="gongneng_click"><i></i><b>7</b></div>
				<div class="gongneng_click"><i></i><b>8</b></div>

			</div>
		</div>
		<div class="conBox">
			<div class="gongneng_tabcon" style="display:block;">
				<div class="gongneng_left1 fadeInLeft">
					<img src="statics/images/web_point_img1.png" />
				</div>
				<div class="gongneng_right1">
					<b>01</b>
					<em>店鋪風格隨心換</em>
					<p>海量模板隨心換</p>
					<p>更多插件模塊隨心搭配</p>
				</div>
			</div>
			<div class="gongneng_tabcon">
				<div class="gongneng_right2">
					<b>02</b>
					<em>應用插件功能強大</em>
					<p>擁有齊全的應用插件</p>
					<p>商城插件營銷插件一應俱全</p>
				</div>
				<div class="gongneng_left2 fadeInRight">
					<img src="statics/images/web_point_img2.png" />
				</div>
			</div>
			<div class="gongneng_tabcon">
				<div class="gongneng_left3 fadeInLeft">
					<img src="statics/images/web_point_img3.png" />
				</div>
				<div class="gongneng_right3">
					<b>03</b>
					<em>無需開發,小程序一鍵生成</em>
					<p>針對時下火熱的小程序,</p>
					<p>無需任何技術,一鍵打包生成,</p>
					<p>即用即走,集展示、互動、交易為一體,</p>
					<p>為您帶來無盡流量</p>
				</div>
			</div>
			<div class="gongneng_tabcon">
				<div class="gongneng_right4">
					<b>04</b>
					<em>支持多頁面,flex開發</em>
					<p>隨時切換</p>
					<p>快速調用回到開始狀態</p>
					<p>支持flex框架下的布局開發</p>

				</div>
				<div class="gongneng_left4 fadeInRight">
					<img src="statics/images/web_point_img4.png" />
				</div>
			</div>
			<div class="gongneng_tabcon">
				<div class="gongneng_left5 fadeInLeft">
					<img src="statics/images/web_point_img5.png" />
				</div>
				<div class="gongneng_right5">
					<b>05</b>
					<em>全平臺統一管理</em>
					<p>告別冗雜的維護成本,</p>
					<p>統一管理你的網站與小程序</p>
				</div>
			</div>
			<div class="gongneng_tabcon">
				<div class="gongneng_right6">
					<b>06</b>
					<em>綁定多個小程序</em>
					<p>一個賬號下可綁定5個小程序</p>
					<p>再也不用注冊多個賬號切換啦</p>
				</div>
				<div class="gongneng_left6 fadeInRight">
					<img src="statics/images/web_point_img6.jpg" />
				</div>
			</div>
			<div class="gongneng_tabcon">
				<div class="gongneng_left7 fadeInLeft">
					<img src="statics/images/web_point_img7.png" />
				</div>
				<div class="gongneng_right7">
					<b>07</b>
					<em>分銷商城版</em>
					<p>快速建設分銷渠道</p>
					<p>商家一鍵自動分賬</p>
					<p>輕松補充優質貨源</p>

				</div>
			</div>
			<div class="gongneng_tabcon">
				<div class="gongneng_right6">
					<b>08</b>
					<em>雙平臺在線發布</em>
					<p>微信小程序/百度小程序,兩大小程</p>
					<p>序平臺一鍵發布,全面獲取流量</p>

				</div>
				<div class="gongneng_left8 fadeInRight">
					<img src="statics/images/web_point_img8.jpg" />
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	//tab切換
	$('.gongneng_tabmin div').hover(function(){
		var conBox = $("#gongneng_main").find('.conBox');
		$(this).addClass("cur").siblings('.cur').removeClass("cur");
		conBox.find(".gongneng_tabcon").eq($(this).index()).show().siblings(':visible').hide();				
	})
</script>
[聲明]本站素材來自用戶分享,僅限學習交流請勿用于商業用途。如損害你的權益請聯系客服QQ:2447402004給予處理。
舉報×
舉報原因:

相關代碼

二維碼
意見反饋
×
×

注冊

QQ注冊 立即下載 新浪注冊 立即下載

簽到成功!

已連續簽到1天,簽到3天將獲得積分VIP1天

知道了
cc竞速飞车公式规律