jquery帶箭頭的滑動選項卡內容切換代碼



157 627 210



特效描述:jquery 帶箭頭滑動選項卡 選項卡內容切換,jQuery橙色的選項卡切換樣式,鼠標經過選項卡標簽滑動內容切換效果。

代碼結構

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

3. HTML代碼

<div class="o-m">
	<div class="ul-o">
		<ul>
			<li class="li-o"><span></span><p>客戶充分信任您</p><div class="clear"></div><b></b></li>
			<li class="li-t"><span></span><p>更多客戶快速找到您</p><div class="clear"></div><b></b></li>
			<li class="li-s"><span></span><p>銷售網絡快速擴張</p><div class="clear"></div><b></b></li>
			<li class="li-f"><span></span><p>實時互動溝通轉化率高</p><div class="clear"></div><b></b></li>
			<li class="li-w"><span></span><p>超強電商管理引爆成交量</p><div class="clear"></div><b></b></li>
			<li class="li-l"><span></span><p>強化維系客戶,利潤持續增長</p><div class="clear"></div><b></b></li>
			<div class="li-mask"></div>
		</ul>
	</div>
	<div class="ul-t">
		<li style="display:block">
			<div class="li-top">
				<h5>客戶充分信任您</h5>
				<p>強大視覺沖擊力提升網站形象實力,極具銷售力的產品展示突出賣點,吸引眼球打動客戶;</p>
				<div class="li-a"><a>專業的官網</a><a>產品展示</a><a>文章展示</a><a>地圖位置</a><a>走馬燈</a><a>全屏浮動</a><a>視頻</a><a>多種圖文特效</a></div>
				<div class="li-img"><img src="img/n-qyjz-40.gif" /></div>
			</div>
		</li>
		<li>
			<div class="li-top">
				<h5>更多客戶快速找到您</h5>
				<p>PC端+手機端全網搜索引擎SEO優化,提升網站排名引流量,更多客戶找到您,<br />強大推廣方式+超強營銷工具,擴大客流量、訂單量</p>
				<div class="li-a"><a>PC+手機端</a><a>SEO優化</a><a>一鍵分享傳播</a><a>搶紅包</a><a>朋友助力</a><a>眾籌</a><a>好友贊助</a><a>一元奪寶</a></div>
				<div class="li-img"><img src="img/n-qyjz-47.gif" /></div>
			</div>
		</li>
		<li>
			<div class="li-top">
				<h5>銷售網絡快速擴張</h5>
				<p>全新"分銷加盟+三級返傭"模式體系,無限發展下游,讓您的分銷商滿天下;</p>
				<div class="li-a"><a>精美分銷店鋪</a><a>自選分銷產品</a><a>一鍵分銷</a><a>無限下級</a><a>分銷商管理</a><a>傭金管理</a><a>推廣文案管理</a></div>
				<div class="li-img"><img src="img/n-qyjz-48.gif" /></div>
			</div>
		</li>
		<li>
			<div class="li-top">
				<h5>實時互動溝通轉化率高</h5>
				<p>方便的客服溝通工具,實時互動咨詢,快速提升詢盤率和成交轉化率,變流量為銷量;</p>
				<div class="li-a"><a>多種熱門客服工具</a><a>微客服</a><a>在線留言板</a></div>
				<div class="li-img"><img src="img/n-qyjz-49.gif" /></div>
			</div>
		</li>
		<li>
			<div class="li-top">
				<h5>超強電商管理引爆成交量</h5>
				<p>強大的商品管理,團購、秒殺等電商功能促進高銷量,方便快捷的購物車及支付方式促成交,流量、業績統計分析盡在掌握中;</p>
				<div class="li-a"><a>產品管理</a><a>訂單管理</a><a>物流配送管理</a><a>數據統計分析</a><a>團購</a><a>秒殺</a><a>砍價</a><br /><a>購物車</a><a>多種在線支付</a><a>掃碼支付</a></div>
				<div class="li-img"><img src="img/n-qyjz-50.gif" /></div>
			</div>
		</li>
		<li>
			<div class="li-top">
				<h5>強化維系客戶,利潤持續增長</h5>
				<p>客戶管理、維系、關懷全方位,結合高效互動營銷工具,深度挖掘新老客戶潛力價值,刺激客戶持續消費 </p>
				<div class="li-a">
					<span>客戶管理:</span><a>會員管理</a><a>會員卡</a><a>會員預約</a><a>積分管理</a><a>優惠券</a><br />
					<span>客戶關懷:</span><a>簽到</a><a>生日積分</a><a>充值</a><a>開卡</a><a>消費贈送</a><a>賀卡</a><br />
					<span>抽獎互動:</span><a>大轉盤</a><a>刮刮卡</a><a>砸金蛋</a><a>搖一搖</a><a>微現場</a><br />
					<span>提升服務:</span><a>調研</a><a>投票</a>
				</div>
				<div class="li-img"><img src="img/n-qyjz-51.gif" /></div>
			</div>
		</li>
	</div>
	<div class="clear"></div>
</div>
<script type="text/javascript">
$('.o-m .ul-o li').hover(function () {
	var linum = $(this).index()
	$('.o-m .ul-t li').eq(linum).stop().show().siblings().hide()
})
$(function () {
	var slip = $('.li-mask');
	var a = $('.o-m .ul-o li:first');
	//初始化滑塊
	slip.css({
		'top': parseInt(a.position().top) + 'px'
	});
	$('.o-m .ul-o li').mouseenter(function () {
		//顯示滑塊
		if (slip.css('display') == 'none') {
			slip.show();
		};
		//移動滑塊
		slip.stop().animate({
			top: parseInt($(this).position().top) + 'px'
		}, 300);
	});
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 其他 滑動選項卡 滑動切換 圖片切換 圖片選項卡 圖標選項卡 文字切換 文字選項卡 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

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