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天

知道了
58福彩 www.204882.com-网彩骗局-| www.5556.wang-万彩3d开奖预测| www.83811.cc-第二人生如何中彩票| www.33245.com-体彩时时彩走势图| www.135306.com-二元彩票走势图| www.321707.com-人工智能彩票算法| 500彩票www.552703.com| www.532577.com-杭州申请彩票投注站| www.035606.com-幸运快三赢钱技巧| www.cp8868.com-999彩票app-| www.299231.com-爱彩票官网-| www.491799.com-临夏福彩147| www.70008.com-玩时时彩稳赚| www.028470.com-大发快三黑彩破解| www.113457.com-qq怎么买彩票| www.144744.com-竞彩足球14场规则| www.wh24.com-91彩神福彩快三| www.sy93.cc-彩票平台那个好| www.073273.com-也买彩是骗人的么| www.6765.biz-彩票对子是什么意思| www.69332.cc-中国竞彩赛事公告| www.117991.com-分分彩赢彩计划| www.257144.com-中快3彩票app| www.24684.cc-唯美彩铅花鹿| www.30np.com-极速分分彩官方开奖| www.cm11.cc-彩报3d-| www.16.vip-中国副利彩票双色球| www.84sa.com-福彩3b迷图大全| www.16926.com-玩彩票输钱了怎么办| www.012669.com-海南七星彩最新图规| www.951804.com-彩神争霸888| www.qc2.com-福彩快三开奖规律| www.yi09.com-七星彩体育彩票| www.031294.com-上淘快三开奖结果| www.5oa.cc-足彩怎么交税| www.570202.com-彩票451-| www.699581.com-快三必中两码组合| www.839672.com-彩色耐磨地坪报价| www.964192.com-福彩试机号近100| www.25no.com-女生说在玩彩票| www.772856.com-提前知道时时彩软件| www.971294.com-快三最新玩法| www.s88.com-彩票托晚上-| www.50ic.com-威尼斯人彩票| www.3812.bid-中彩体育合法吗| www.964818.com-南粤福彩近30期| www.50vi.com-1分快彩-| www.1784.vip-国内最牛彩票投注站| www.1728.in-内蒙快三d-| www.10027.com-七乐彩专家测号码| www.61918.cc-领航彩票计划| www.755093.com-福彩3d北斗推荐| www.820890.com-彩色透水混凝土工艺| www.g82.club-中国彩宝-| www.a39.top-职业彩民高手| www.383832.com-e77乐彩会员登录| www.563456.com-3d彩经大全-| www.647027.com-足彩14场投注比例| www.731740.com-我在8k彩票app| www.813083.com-虚拟足球e球彩守号| www.882468.com-英国五分彩是真的吗| www.956510.com-富贵彩是骗局吗| 非凡彩票www.77210h.com| www.799759.com-福彩3d藏机图真版| www.886243.com-彩票抓尾原理| www.981643.com-彩民周刊-| www.yf82.com-遵义市福彩中心地址| www.79078.com-高频彩开奖结果赚钱| www.063022.com-彩票怎么开投注站| www.04rz.com-油性彩铅教程| www.6430.vip-333彩网账号| www.12vo.com-江苏竞彩快三快三| www.4778.cm-福利三分彩全天计划| www.057885.com-福彩快三投注计算器| www.x23.cc-云南福利彩票官方网| www.0812.net-锋彩直播app下载| www.566390.com-重时时彩过滤器| www.660947.com-彩票社区白菜社区| www.755926.com-288布衣彩吧图库| www.835983.com-手机彩娃彩票下载| www.909936.com-极速彩票规律| www.973665.com-手机福彩客户端| www.bm17.com-凤凰彩票app下载| www.297114.cc-今天福彩3d谜语| www.368809.com-9万彩票安卓手机版| www.bx30.com-十分彩app-| www.181827.com-大发快三官方网| www.220361.com-上海快三下载安装| 众彩www.981060.com| www.7935.cm-双色球天吉彩票诗谜| www.184.cm-时时彩平刷技术| www.365952.cc-彩29彩票违法吗| www.181259.com-广东好彩3-| www.1728.bid-彩票玩家数据| www.830972.com-新彩吧手机网分析| www.948023.com-福彩3d生肖幸运号| 500彩票www.66621h.com| www.lz92.com-时时彩反倍投技巧| www.p14.cc-时彩赚钱团队qq群| www.40gz.com-彩礼超两万-| www.671277.com-快乐彩怎么预测和| www.736136.com-福彩怎么卖-| www.802556.com-江苏体彩115| www.866171.com-搜狐彩票网下载| www.929323.com-安徽秦栏体育彩票| www.974808.com-南国体彩论坛社区| 大赢家彩票平台www.627797.com| www.520247.com-红牛彩是真的吗| www.353006.com-哪个平台还能买彩票| www.188.net-彩铅难吗-| www.877282.com-七乐彩几点就封机了| www.978111.cc-会理拆除彩钢棚文件| 600彩票www.949498.com| www.767178.com-竞彩计算器足球| www.885017.com-亿彩堂app-| www.972832.com-日彩网是真的吗| 幸运彩票www.luck885.com| www.jw83.com-彩吧彩票是官方的吗| www.88357.cc-玩彩票需要什么心理| www.2435.vip-吉林快三逐鹿计划| www.52492.com-好彩官网骗局| www.25ns.com-华东福彩十五开始| www.161900.com-青海快三推荐今天| www.8470.cc-博友彩可信吗| www.289671.com-输入彩票号自动查询| www.385071.com-澳发彩票是骗人吗| www.501838.com-七乐彩中5个号有奖| www.374953.com-五分⑥和彩计划资料| www.514012.com-福彩模拟选号app| www.580622.com-吉林省彩票得主| www.658078.com-百宝彩河北十一选五| 天天中彩票www.839991.com| www.41uf.com-浙江体育彩票飞鱼| 818合彩www.www.9889hc.com| www.389527.com-北京加盟彩票站| www.19084.cc-中国福彩中奖规则图| www.690976.com-九州彩票是否合法| www.783460.com-广西快三豹子遗漏| www.42115.com-彩票是什么样| www.681311.com-兴盈快三能代理吗| www.0718.cc-添彩涂料彩票平台| www.677595.com-双色彩票开奖时间表| www.555838.com-爱彩乐推荐得准不准| www.4586.vip-怎么去店上买彩票| www.055222.com-彩票中奖头像| www.133.red-彩虹的约定亲子视频| www.521693.com-崂山区体彩办| www.60102.com-福彩十分钟规则| www.12kh.com-贵州快三和值遗漏| www.363675.com-关于彩虹的句子| www.20475.cc-足彩胜负彩即时比分| www.211126.com-安徽福彩官网首页| www.8427.cn-体彩彩票中奖分布| www.004927.com-彩票开奖专家预测| www.88sp.com-连连中彩票合法吗| www.21385.cc-彩神3计划下载| www.79362.cc-龙江福彩开将公告| www.838359.com-彩钢瓦补漏防水| www.918342.com-900彩票是真的吗| www.970145.com-台湾有那些彩票| 梦想彩票站www.43131u.com| www.789397.com-篮球竞彩分析app| www.876175.com-体彩排列三天使断组| www.940298.com-吉林快三啊-|