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.535325.com-七星彩的数字对数| www.218281.com-有正规的网络彩票吗| www.856875.com-天龙团队网络彩票| www.ix0.com-内蒙古快三官方下载| www.45yc.com-中博彩票可靠吗| www.021147.com-大乐透彩票老谢| www.71mv.com-买彩票的祝福| www.236657.com-竞彩网足球-| www.682230.com-球彩app-| www.220213.com-河北快三开奖结| www.390605.com-体彩小熊猫-| www.2401.org-好彩妹心水码| www.2487.vip-唯彩看球app苹果| www.979917.com-互动彩票平台| www.433030.com-如何做好福彩管理员| www.126979.com-彩宝贝网彩票网址| www.737186.com-彩票智能机选| 购彩在线www.66332b.com| www.404234.com-彩礼吉利数字| www.sa95.com-没人在黑彩赢过钱吗| www.06ou.com-众彩极速赛车破解版| www.435232.com-福利彩票公众号全称| www.766587.com-竞彩开奖-| www.858249.com-彩票也是赌博吗| www.925017.com-福彩彩票开奖视频| www.981987.com-日本彩票新闻| www.ak80.com-甘肃快三开奖果| www.085191.com-彩乐网手机最快开奖| www.338403.com-七乐彩开机号| www.044226.com-福彩专家杀码家彩网| www.661885.com-射阳县体育竞彩店| www.791048.com-福彩3d号码过滤器| www.873478.com-彩c38net-| www.939535.com-彩神大发快三计划| www.987913.com-网络彩票能追回吗| www.kp8.cc-彩票开奖双色球直播| www.og61.com-福彩山东全图| www.r54.com-快三助手安全吗| www.62xk.com-信阳体彩大奖| www.37533.cc-彩票复式中奖率高吗| www.86938.cc-山西大清快三真假| www.020127.com-体彩可以开竞猜吗| www.928737.com-快三二维码下载安装| www.jx35.com-彩票快3手机版| www.22686.com-7星彩开奖结果yy| www.82tz.com-河南1智慧彩| www.31529.com-海宁福彩店转让信息| www.023879.com-五行彩票公式| www.886180.com-香港福利彩票网站| www.017841.com-如何购双色球彩票| www.93xc.com-众益彩票-| www.15977.com-竞彩中奖计算器| www.269166.com-98彩票网合法吗| www.257698.com-安徽快三免费计划| www.46610.com-红彩会官方网站下载| www.16vp.com-兼职竞彩分析师| www.8442.pw-福彩今晚开什么特马| www.792255.com-福利彩票高手预测| www.970940.com-买彩票如何中奖| www.vk02.com-彩票三d-| www.69393.com-福彩三d守号| www.41xq.com-北京彩色透水地坪| www.555435.com-查询吹吹七星彩论坛| www.350044.com-五行预测彩票秘法| www.000525.cc-时时彩不贪一个月| www.093881.com-亚博假彩票-| www.372118.com-500轻聊彩票| www.276777.com-2019彩票政策| www.353582.com-即开宝彩票智能终端| www.439908.com-好彩票花呗也可充值| www.543288.com-尊彩app官网| www.616656.com-体彩3串1什么意思| www.723629.com-神彩争霸大发| www.810602.com-7彩乐开奖结果| www.885366.com-时时彩租号工具| www.954741.com-凤凰彩票能破解吗| 99彩票www.31047.com| www.060559.com-七乐彩杀码论坛| www.157425.com-网上购彩软件可靠吗| www.231302.com-时时中彩票下载| www.296296.com-云南福利彩票玩法| www.358499.com-凤凰彩登录首页| www.428567.com-胜负彩500app| www.513695.com-靠谱的网上买彩票| www.573130.com-众恒彩票52868| www.632450.com-打出的彩票能注销| www.689876.com-足彩资讯新浪网| www.756165.com-彩票交流贴吧| www.815291.com-福彩彩视频-| www.886021.com-彩虹屁是什么梗| www.952823.com-今日竞彩足球对阵表| 爱彩www.015ac.com| www.yy5.com-破解广西快三| www.875365.com-手机买彩票能中奖吗| www.556365.com-体育彩票开奖结果是| www.621801.com-最新胜负彩预测分析| www.679652.com-什么叫问题彩民| www.748490.com-快彩注册邀请码| www.805040.com-新彩365-| www.871231.com-彩71彩票官网| www.923456.com-彩票投注站私自吃票| www.972684.com-彩铅画人物动漫| www.cp292.com-内蒙古快三开奖结| www.19951.com-吉林快三和数表| www.f28.org-怎样举报彩票app| www.288127.com-贵州彩票快三软件| www.409711.com-够力七星彩安卓下载| www.023651.com-七乐彩停售时间| www.185861.com-时时彩怎么玩都是死| www.332507.com-手机黑彩-| www.zt45.com-极速3d彩票规则| www.017852.com-怎么购买双色球彩票| www.110420.com-福彩双色球开什么号| www.286795.com-安徽福彩快开三| www.425008.com-新乐彩票登录| www.646737.com-胜负彩中奖故事| www.792689.com-彩票九骗局-| www.939016.com-大发快三作弊软件| www.4204.cc-七彩红包是真的吗| www.29162.cc-手机购彩哪个好| www.716538.com-购力七星彩奖表| www.862708.com-上海天天彩选4开奖| www.125674.com-七乐彩今天晚上开奖| www.781794.com-分分彩挂机稳赚| www.01157.com-彩之网独家-| www.06086.com-555彩票开户| www.56595.cc-邯郸市体彩中心电话| www.019317.com-铜仁彩票中心| www.089041.com-彩神2是否合法| www.909504.com-今天贵州快三走势图| www.990197.com-乐彩网软件下载| 彩乐乐www.3005u.com| www.659455.com-利彩一我的账户| www.146992.com-迷彩网下载-| www.245299.com-竞彩足球比分开奖| www.914995.com-时时彩送彩金19| www.986342.com-金手指彩票网| www.hr1.com-内蒙古11选5彩票| www.17tv.com-大乐彩今晚开奖视频| www.77bh.com-御彩轩彩票计划| www.76355.cc-网上哪里有彩票投注| www.540365.com-迪士尼彩乐园假网址| 彩神帝www.598300.com| www.3284.vip-绝望的只有买彩票| www.613651.com-如何举报网络彩票| www.954103.com-福彩3晒票详情| www.786.cm-福彩3d字迷解释| www.7375.xyz-色彩搭配技巧| www.320181.com-百宝彩票江苏快三| www.408177.com-够力七星彩图| www.758585.com-99彩票是不是骗局| www.9930.net-冮苏快三开奖号码| www.152520.com-5分快三开奖| www.94pj.com-乐米彩票怎么注册| www.531220.com-客彩网触屏版| www.615098.com-真品辽三彩图片| www.693099.com-小白彩票旧版| www.779376.com-福彩三毛寻宝图| www.852005.com-长沙福彩中心地址| www.939629.com-香港福彩网址是多少| www.988625.cc-必中全民彩彩票| www.cd24.com-福彩旗下的快开彩| www.wo42.cc-广西福彩3d-| www.166901.com-江苏快三玩法|