QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 选项卡/滑动门 > jQuery仿京东云系列tab图标导航切换代码

原创商用 jQuery仿京东云系列tab图标导航切换代码

jQuery仿京东云产品系列图标导航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="yun-main-solution">
	<div class="yun-main-hd">
		<h3 class="yun-main-title">成熟、领先的解决方案</h3>
		<p class="yun-main-des">行业纵深,直达痛点,专业经验为您解决多种业务难题</p>
	</div>
	<div class="yun-main-bd">
		<div class="yun-solution-slider-content">
			<ul class="yun-solution-wrap">
				<li class="yun-solution-item  wapSolution current" style="background: url(statics/images/dsy.jpg) center center no-repeat;">
					<div class="yun-solution-item-content">
						<div class="yun-solution-text-wrap">
							<dl><dt class="yun-solution-title"><em>电商云</em> </dt>
								<dd class="yun-solution-des">在云计算和大数据基础上,结合了京东十多年电子商务技术及运营经验,推出帮助传统企业互联网转型和打破人、货、场边界的无界零售电商解决方案。</dd>
							</dl>
							<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
						</div>
					</div>
				</li>
				<li class="yun-solution-item wapSolution" style="background: url(statics/images/tgy.jpg) center center no-repeat;">
					<div class="yun-solution-item-content">
						<div class="yun-solution-text-wrap">
							<dl><dt class="yun-solution-title"><em>托管云</em> </dt>
								<dd class="yun-solution-des">整合京东云丰富的云资源,为您提供稳定、安全、经济的应用托管解决方案。一站式服务,业务轻松上云;弹性扩展,轻松应对业务快速增长;全方面安全防护,保障业务数据安全。</dd>
							</dl>
							<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
						</div>
					</div>
				</li>
				<li class="yun-solution-item" style="background: url(statics/images/sjy.jpg) center center no-repeat;">
					<div class="yun-solution-item-content">
						<div class="yun-solution-text-wrap">
							<dl><dt class="yun-solution-title"><em>数据云</em> </dt>
								<dd class="yun-solution-des">结合京东“完善高质的数据链+丰富的业务场景+强大的数据分析能力”,京东云大数据处理引擎充分覆盖各行业大数据需求。京东云大数据专家团队将根据用户具体需求,提供丰富的解决方案。</dd>
							</dl>
							<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
						</div>
					</div>
				</li>
				<li class="yun-solution-item wapSolution" style="background: url(statics/images/wly.jpg) center center no-repeat;">
					<div class="yun-solution-item-content">
						<div class="yun-solution-text-wrap">
							<dl><dt class="yun-solution-title"><em>物流云</em> </dt>
								<dd class="yun-solution-des">依托京东稳定、高效、灵活的云计算和大数据能力,为政府和企业提供物流技术、产品及运营咨询服务,降低用户自建物流成本,提升物流运营效率,助力政企互联网+物流转型升级。</dd>
							</dl>
							<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
						</div>
					</div>
				</li>
				<li class="yun-solution-item" style="background: url(statics/images/zny.jpg) center center no-repeat;">
					<div class="yun-solution-item-content">
						<div class="yun-solution-text-wrap">
							<dl><dt class="yun-solution-title"><em>智能云</em> </dt>
								<dd class="yun-solution-des">依托京东云技术和大数据能力,整合京东在互联网市场的优质资源,提供技术支持、智能产品对接、智能创业孵化等服务,加速政府、企业及个人在“互联网+智能”创新转型。</dd>
							</dl>
							<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
						</div>
					</div>
				</li>
				<li class="yun-solution-item" style="background: url(statics/images/cyy.jpg) center center no-repeat;">
					<div class="yun-solution-item-content">
						<div class="yun-solution-text-wrap">
							<dl><dt class="yun-solution-title"><em>产业云</em> </dt>
								<dd class="yun-solution-des">立足产业客户的行业需求,依托京东云强大的技术与云产品;并结合京东的互联网+的实践经验与集团资源;透过京东云专业服务,共筑行业标杆与业界领先的产业解决方案。</dd>
							</dl>
							<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
						</div>
					</div>
				</li>
				<li class="yun-solution-item" style="background: url(statics/images/jry.jpg) center center no-repeat;">
					<div class="yun-solution-item-content">
						<div class="yun-solution-text-wrap">
							<dl><dt class="yun-solution-title"><em>金融云</em> </dt>
								<dd class="yun-solution-des">采用独立的机房集群,与公有云物理隔离。基于两地三中心的机房布局,满足一行三会对于金融业的监管要求。帮助金融客户从现有传统IT迈向大数据和云计算,实现业务创新转型。</dd>
							</dl>
							<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
						</div>
					</div>
				</li>
				<li class="yun-solution-item" style="background: url(statics/images/api.jpg) center center no-repeat;">
					<div class="yun-solution-item-content">
						<div class="yun-solution-text-wrap">
							<dl><dt class="yun-solution-title"><em>数据 API 平台</em> </dt>
								<dd class="yun-solution-des">京东云万象大数据开放平台是京东云在已有的云计算平台基础上围绕数据提供方、数据需求方、数据服务方等多方,构建了以数据开放、数据共享、数据分析为核心的综合性数据开放平台,为全行业提供权威数据支持,打造全行业数据开放的优质生态圈。</dd>
							</dl>
							<a href="javascript:;" target="_blank" class="yun-solution-btn">更多</a>
						</div>
					</div>
				</li>
			</ul>
			<a href="javascript:;" class="yunfont yun-btn-more js-btn-more">展开全部</a>
			<div class="yun-arrow-wrap yun-arrow-current1" id="yun-arrow-wrap">
				<div class="yun-arrow-item"></div>
				<div class="yun-arrow-item yun-arrow-triangle"></div>
				<div class="yun-arrow-item"></div>
			</div>
		</div>
		<div id="js-sliderBox" class="w yun-solution-list-wrap hidden-xs" style="position: relative;">
			<ul class="yun-solution-list" style="width: 1200px; left: 0px; position: absolute;">
				<li class="yun-solution-list-item current" data-slider-idx="0" style="width: 150px; height: 77px; float: left;">
					<div class="img-wrap" style="background-image: url(statics/images/dsy.png); background-position: 0px 0px;"></div>
					<p class="yun-solution-text">电商云
					</p>
				</li>
				<li class="yun-solution-list-item" data-slider-idx="1" style="width: 150px; height: 77px; float: left;">
					<div class="img-wrap" style="background-image: url(statics/images/tgy.png); background-position: 0px 0px;"></div>
					<p class="yun-solution-text">托管云
					</p>
				</li>
				<li class="yun-solution-list-item" data-slider-idx="2" style="width: 150px; height: 77px; float: left;">
					<div class="img-wrap" style="background-image: url(statics/images/sjy.png); background-position: 0px 0px;"></div>
					<p class="yun-solution-text">数据云
					</p>
				</li>
				<li class="yun-solution-list-item" data-slider-idx="3" style="width: 150px; height: 77px; float: left;">
					<div class="img-wrap" style="background-image: url(statics/images/wly.png); background-position: 0px 0px;"></div>
					<p class="yun-solution-text">物流云
					</p>
				</li>
				<li class="yun-solution-list-item" data-slider-idx="4" style="width: 150px; height: 77px; float: left;">
					<div class="img-wrap" style="background-image: url(statics/images/zny.png); background-position: 0px 0px;"></div>
					<p class="yun-solution-text">智能云
					</p>
				</li>
				<li class="yun-solution-list-item" data-slider-idx="5" style="width: 150px; height: 77px; float: left;">
					<div class="img-wrap" style="background-image: url(statics/images/cyy.png); background-position: 0px 0px;"></div>
					<p class="yun-solution-text">产业云
					</p>
				</li>
				<li class="yun-solution-list-item" data-slider-idx="6" style="width: 150px; height: 77px; float: left;">
					<div class="img-wrap" style="background-image: url(statics/images/jry.png); background-position: 0px 0px;"></div>
					<p class="yun-solution-text">金融云
					</p>
				</li>
				<li class="yun-solution-list-item" data-slider-idx="7" style="width: 150px; height: 77px; float: left;">
					<div class="img-wrap" style="background-image: url(statics/images/api.png); background-position: 0px 0px;"></div>
					<p class="yun-solution-text">数据 API 平台
					</p>
				</li>
			</ul>
			<a href="javascript:;" class="yun-solution-btn yun-solution-btn-prev yunfont disabled">?</a>
			<a href="javascript:;" class="yun-solution-btn yun-solution-btn-next yunfont disabled">?</a>
		</div>
	</div>
</div>


<script type="text/javascript">
	$(function(){
		//TAP
		$('ul.yun-solution-list li').click(function(){
			var index = $(this).index();
			$('ul.yun-solution-wrap li').removeClass('current').eq(index).addClass('current');
			$('#yun-arrow-wrap').attr('class','yun-arrow-wrap yun-arrow-current'+(index+1));
		})
		//背景变换
		$('ul.yun-solution-list li').hover(function(){
			var that =$(this);
			var i=0;
			bgChange = setInterval(function (){
				i+=-84
				that.find('div').css('backgroundPositionY',i)						
				if(i<=-2058){
					clearInterval(bgChange);
				}
			},50)
		},function(){
			clearInterval(bgChange);
		})
	})
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
金福彩票 www.48765.com-福彩3d和值尾| www.026915.com-代玩彩票刷佣金被骗| www.447228.com-迷彩战士是哪种动物| www.0797.net-高手彩票、彩票高手| www.32569.cc-南阳结婚男方彩礼钱| www.68se.cc-中乐彩怎么样| www.988508.com-千禧彩票首页| www.242845.com-105彩票苹果版| www.333978.com-体育彩票怎样玩| www.768728.com-uu直播手机彩| www.250371.com-九歌彩票手机版| www.961216.com-分分彩辅助预测软件| www.cp3311.cc-国家福彩一分快三| www.sv09.com-彩票七星彩预测| www.38ui.com-彩铅房子风景画儿童| www.772.live-画彩虹背面图片大全| www.751209.com-今晚开什么彩票号码| www.822992.com-大乐购彩票-| www.139341.com-33福彩网-| www.43og.com-足彩任九复式计算表| www.038050.com-cp彩票网收集| www.137524.com-亚洲彩票平台排名| www.776832.com-福彩大佬人预测| www.869348.com-三号彩票网-| www.946595.com-信彩票软件-| www.996652.com-福彩浙江12选5| www.fu21.com-彩神ll解析-| www.g07.cn-彩票256官网地址| www.81128.com-双色球搜狐彩票网| 利彩www.57578j.com| www.766709.com-k彩彩民福福地| www.683155.com-彩票预测推荐下载| www.80es.com-腾讯分分彩万能大底| www.54863.cc-cc极速和彩-| www.8506.vip-高频彩盈利方法文章| www.95509.com-足彩直播吧-| www.239803.com-王者彩票可靠不| www.057362.com-极速快三走势图| www.076566.com-彩票怎么买几个数| www.232491.com-微彩网是真的吗| www.ly99.com-极速时时彩怎么玩法| www.006967.com-腾讯十分彩开奖网站| www.733571.com-福彩机器充值| www.900886.com-福彩3d陈华杀尾| www.00im.com-描述彩虹一段话| www.22986.cc-傲赢彩票正规吗| www.cp622.cc-注册快三平台官网| www.758110.com-彩38网站怎么样| www.jv93.com-七星彩复式胆拖| www.365436.cc-彩铅风景初级教程| www.451896.com-彩票中奖前有预感吗| www.689305.com-51彩票网址多少| www.778566.com-体彩7星彩开奖号码| www.cw29.com-八手巴购彩票骗局| www.3903.com-福彩3d和尾技巧| www.34447.cc-换ip代打彩票兼职| www.868537.com-七星彩割码规律图| www.062695.com-河内彩最新开奖号码| www.937607.com-好运快三开奖| www.77428.cc-幸运彩体彩软件下载| www.99116.cc-腾讯时时彩能玩吗| www.943328.com-福彩快三开奖视频| www.qq34.com-福彩人员判刑| www.633333.com-360彩票合法吗| 500彩票网www.61655n.com| www.694338.com-3d体彩吧-| www.802808.com-彩票中奖可以代领取| www.889605.com-凤凰彩世界贴吧| www.965927.com-河北快三冷号查询| www.cai2988.com快三是啥东西| www.428493.com-彩种投注大小双单| www.620030.com-彩票易中奖软件下载| www.2mq.cc-体彩能买足球吗| www.519198.com-97彩票网骗局| www.vy.com-手机购彩-| www.682320.com-福彩3d黑牛资料| www.407908.com-体育彩票休假时间| www.544876.com-粤淘彩票合法吗| www.616594.com-长春体彩对将地址| www.677040.com-体彩刮刮乐有假的吗| www.171455.com-七星彩口诀-| www.306681.com-梦到买彩票中奖| www.080727.com-色彩构成-| www.140324.com-华宇彩票平台怎么样| www.69365.cc-数字流运预测彩票| www.896426.com-十分彩计划app| www.xl49.com-福彩瑞app-| www.1014.com-现在的彩票是真的吗| www.35835.cc-08彩票预测软件| www.449114.com-华夏五分彩-| www.394501.com-周五有什么彩票开奖| www.442237.com-竟彩500比分直播| www.556213.com-老三国精彩打斗视频| www.940880.com-天天乐彩票平台注册| www.771859.com-福利彩票开奖期查询| www.856308.com-博彩漏洞反水| www.ri32.com-七乐彩奖金说明| www.9663.com-彩独2-| www.52442.cc-3d选号彩报18年| www.6310.me-36o彩票导航| www.237895.com-广西快三派彩助手| www.353666.cc-澳门负责任博彩协会| www.435447.com-城云路彩票站| www.522182.com-腾讯5分彩下载安装| www.589528.com-七星彩大狼狗图纸| www.768568.com-百盈大发快三计划| www.161616.com-时时彩黑客入侵改单| www.8290.com-新盈彩登录-| www.98223.cc-香港利民彩计划| www.31834.com-易彩堂靠谱吗| www.055866.com-合肥福彩中心官网| www.213248.com-彩票app制作| www.13677.cc-足球混合竞彩| www.09.cm-福彩3d断组| www.61pj.cc-七星体彩开奖结| www.246405.com-华夏彩票网是黑平台| www.584605.com-苏宁彩票网址| www.97aw.com-易发彩票app下载| www.jc75.com-779彩票官网| www.856004.com-新西兰快三玩法说明| www.925873.com-爱乐透彩票不更新| www.997338.com-登录奔驰彩票app| www.gh27.com-正规快三彩票| www.739503.com-萬博彩票-| www.808551.com-竞彩任九奖金预测| www.98xt.com-中国竟彩网app| www.af83.com-福彩三d新彩网| www.xj51.cc-甘肃省福彩天地报纸| www.rt03.com-手机中福彩票安全吗| www.89754.com-好莱客彩票下载安装| www.1575.xyz-彩宝彩票没啥不见了| www.882941.com-谁有彩票代打的路子| www.967787.com-聊彩-| www.cp6663.cc-福利彩票官方下载| www.mc94.com-幸运快三百家号| www.x41.org-大发彩票计划网站| www.615268.com-手机买不了彩票| www.2643.vip-淘彩票彩种| www.394871.com-福利彩票賺的钱归谁| www.5491.top-双彩网开奖直播| www.90ei.com-足球博彩软件开发| www.1182.pw-大富彩票网靠谱吗| www.115364.com-进球彩规则-| www.612459.com-安装彩计划-| www.813589.com-贵州福利彩票结果| www.884581.com-福彩山地综合走势图| www.yi1.cc-大发快三体彩| www.96380.com-福彩业务知识| www.062635.com-重庆时时彩五星| www.549827.com-足彩店月收入| www.5yd.cc-豪彩vip漏洞| www.8389.top-七星彩组合数字| www.69929.com-彩虹8彩票官方网站| www.044147.com-彩票自动挂机软件| www.255371.com-彩票数字有几位| www.432711.com-福彩时时彩实时开奖| www.560500.com-彩29app官网| www.77700.com-悟空彩票有人玩吗| www.0715.net-体彩移机申请怎么写| www.83520.com-福利彩票新手| www.881715.com-包赔本金彩票| www.207877.com-彩经网彩票工具软件| www.51263.cc-1166彩票-| www.083508.com-pk10彩票送彩金|