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.22952.com-中彩那天教学设计| 3158彩票www.cp3158.com| www.984525.com-彩运8官方下载| www.493582.com-怎样建立彩票网站| www.623073.com-哪些彩票合法| www.773206.com-足球彩票18096| www.921058.com-命中中彩双色球预测| www.743676.com-购彩8888彩票| www.944623.com-体彩论坛17500| www.pp70.com-福彩3d推荐号码| www.279928.com-皇家时时彩app| www.376009.com-安徽体彩中心负责人| www.23xf.com-福彩快3历史号码| www.2534.cc-在深圳福利彩票利润| www.9624.cc-重庆竞彩店网上投注| www.1238.top-彩票豹子怎样的| www.51188.cc-58彩票苹果国内版| www.035452.com-手机至尊争霸彩票| www.445519.com-o2o模式彩票| www.358523.com-113彩票网-| www.5934.cc-深圳市体彩中心主任| www.499636.com-进口彩铅笔56色| www.210670.com-安徽快三奖金图| www.29929.com-大乐透的牛预测彩网| www.12128.com-体彩大乐透下载安装| www.549591.com-足彩去哪投注| www.660146.com-彩票下载官网| www.028697.com-杏彩网页登陆首页| www.174882.com-快三网上代理平台| www.1993.cn-体彩有没有黑幕| www.gl06.com-福彩快三中了多少钱| www.m31.space-大发时时彩规律技巧| www.943530.com-久久彩票老版| www.wb63.com-七星彩现场直播视频| www.47fy.com-爱乐透买彩票可靠吗| www.200331.com-凤彩网彩票-| www.32mz.com-万国彩票高速网址| www.4535.vip-七星彩所有号码买完| www.129335.com-快三翻倍投注计划| www.0093.cn-买彩票的个性网名| www.001035.com-体彩61开奖-| www.356233.com-慧金彩-| www.260209.com-异地买彩票中奖| www.379352.com-足彩大神推荐论坛| www.567829.com-中国有哪些彩票| www.280718.com-重庆彩票官网首页| www.984315.com-外国时时彩彩票网站| www.cc36.com-体福彩最新开奖结果| www.069994.com-甘肃福彩网官方网| www.390482.com-网络时时彩怎么报警| www.112997.com-彩票坑了多少人| www.208692.com-足彩310什么意思| www.301155.com-南方双彩网首页预测| www.365675.com-时时彩封盘时间| www.120.org-彩盈软件下载| www.232337.com-江苏快三改变玩法| www.332577.com-吉林快三庄家会输么| www.482896.com-福彩3d实时-| www.449590.com-重庆十四彩怎么玩法| www.985184.com-竞彩足球平局排除法| www.wh9.com-河南快三3遗漏| www.68gy.com-查询彩票真假| www.092503.com-腾讯10分彩-| www.388474.com-福利彩票最新图片| www.21376.cc-分分彩报警案例| www.wx30.com-江苏快三开下载安装| www.26cs.com-福彩怎样加盟费多少| www.0232.pw-中国福利彩票案| www.236901.com-足彩串关计算器| www.23at.com-六十一体彩查询| www.122.pw-什么是彩虹屁| www.3344.live-好彩票平台官网| www.138767.com-时时彩在线人工计划| www.26hd.com-买彩票照片-| www.0020.wang-福彩中几位数才有奖| www.8856.org-乐彩网合买大厅| www.5121.biz-高彩对比-| www.935567.com-百赢快三计划| 名门彩www.33997p.com| www.15ks.com-巴中结婚彩礼和陪嫁| www.925339.com-彩6网页版-| www.11563.com-快三和值咋玩| www.73007.com-手机能看彩票中奖吗| www.98ou.com-北京买彩票-| www.790807.com-好彩三张-| www.0069.top-体彩个人申请怎么写| www.9745.xyz-手机买足彩的软件| www.73214.com-手机彩票查询软件| www.048003.com-3d水果图彩吧今天| www.388915.com-体彩开奖公告历史表| www.492253.com-县政府卖彩票合法吗| www.566142.com-慧金彩ios-| www.637291.com-彩虹六号出租| www.705196.com-三地福彩中心开机号| www.773201.com-微彩网址-| www.941022.com-彩票客源-| www.987891.com-中彩手app下载| www.bc31.com-福彩3d彩票一定牛| www.281724.com-七乐彩绝杀-| www.11im.com-彩票江苏老快三| www.397.biz-惠民乐彩票怎么提现| www.610318.com-2019高频彩新规| www.732234.com-彩礼退还比例| www.815179.com-彩票k线图技巧| www.916476.com-彩票33是黑平台吗| www.cai22.cc-快三在线投注平台| www.630436.com-福彩3d汇图谜总汇| www.895429.com-中体华彩彩票合法吗| www.966243.com-体彩双色走势图| www.cp2959.com-彩票托的套路| 盛彩网www.41518c.com| www.530730.com-福彩10期开机号| www.7046.cn-十二生肖彩泥| www.fv84.com-希腊时时彩开奖结果| www.754822.com-黑彩快三怎么拉人| 网易彩票www.36788e.com| www.j64.org-12彩票下载安装| www.1418.org-澳门博彩游戏大全| www.45625.com-大中华彩票骗| www.292888.com-智慧福彩app| www.447277.com-迷彩短裤配什么鞋| www.639941.com-东方彩app下载| www.356928.com-中山中彩票-| www.8373.com-玩彩可以赚到钱吗| www.8707.top-全民竞彩足球是不是| www.40573.com-彩票程序出售| www.511000.com-彩虹马壁纸-| www.831012.com-地新彩网-| www.xc57.com-体彩第19095期| www.867603.com-七星彩公开头尾| www.31155.cc-彩票专业分析管理器| www.074898.com-彩票真人中奖故事| www.197892.com-彩票开奖公告l| www.365869.com-美丽的校园彩铅画| www.xs15.com-送礼金彩票赚钱| www.074751.com-快三跨度计算公式| www.288.cc-七星彩三字定多少钱| www.155075.com-快三怎么能稳赚| www.289116.com-彩神111-| www.417590.com-体育彩票qq交流群| www.2901.cc-辽宁极速快三| www.870864.com-网上挣钱彩票平台| www.980253.com-福彩12-| www.ev68.com-吉林快三不同号推荐| www.085717.com-彩神打印机-| www.150313.com-快三合肥-| www.213692.com-吉林快三技巧方法| www.076738.com-体彩排列三预测推荐| www.755525.com-旺彩大乐透在哪| www.746909.com-河北福彩双色球休市| www.804559.com-七星彩宝贝走势图| www.83816.cc-能直播刮刮彩嘛| www.235028.com-反水彩票平台13%| www.02vx.com-全球彩票开奖网| www.961.cm-彩种齐全领奖无忧| www.541090.com-彩票导凤凰彩票| www.58778.cc-五百彩票开奖公告| www.104831.com-时时彩5星缩水技巧| www.122579.com-乐彩vip登录| www.259389.com-彩票在线模拟摇奖器| www.168224.com-北京快三推荐计划| www.kp33.com-江苏体彩官方网| www.36.la-长汀福彩一等奖| www.93dv.com-2寸彩照是什么底色|