jquery带箭头的滑动选项卡内容切换代码



153 608 203



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

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