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.9591.wang-七星彩南国彩票| www.954842.com-瑞彩祥云下载网址| www.055460.com-福利彩票平台有哪些| www.12625.com-在线体育彩票app| www.767909.com-中大奖彩票图片| www.7101.com-湖南七彩集团董事长| www.155636.com-928彩票-| www.648793.com-七彩辣椒种子| www.vx50.com-时时彩快三软件下载| www.008216.com-肥城体彩大乐透中奖| www.303102.com-优乐彩手机pp| www.22042.com-山东经广播天天福彩| www.745478.com-红彩会网页版| www.o86.net-k8彩票手机客户端| www.235099.com-彩票大奖者结局| www.392374.com-雅宝娱乐重庆时时彩| www.571675.com-五分彩是哪里的彩票| www.693759.com-如何买彩票中奖| www.834483.com-好彩随机宝珠| www.957046.com-腾讯分分彩挂机思路| www.jd60.com-逝江快三-| www.57zm.com-雪缘足彩比赛直播| www.839394.com-七乐彩五期选号法| 皇家彩票www.hj8987.com| www.05311.com-网红阿彩呢扒皮| www.980125.com-彩票打票员会很难吗| www.016656.com-时时彩8码在线计划| www.382416.com-第19049期体彩| www.796069.com-亿乐彩官方登录网| www.cd56.com-吉林快三网上平台| www.198818.com-福彩十选五-| www.208133.com-快三注册平台下载| www.yf4.cc-快乐彩下载安装| www.op64.com-网购彩票app| 500彩票网www.97655m.com| www.993630.com-信誉好的彩票app| www.8573.xyz-ok精彩是几线杂志| www.296001.com-大发快三怎么看单双| www.kc65.com-彩票软件苹果下载| www.736908.com-彩券公司官网| www.876371.com-福彩3d断组-| www.bs96.com-最新的彩票缩水软件| www.xn56.com-易旺彩票手机版| www.65fy.com-3d梁博说彩公众号| www.539114.com-彩票追杀糸统| www.827446.com-澳门三分彩开奖记录| www.pp62.cc-山东体彩排三排五| www.171337.com-安徽体彩十一选开奖| www.642059.com-网易彩票加拿大28| www.981937.com-凤凰购彩平台网址| www.83rv.com-彩票亭转让-| www.572985.com-体彩的缺点-| www.703898.cc-爱彩乐e球彩| www.813188.com-天下彩免费资料大空| www.912196.com-极速快三正规的吗| 网易彩票www.081wy.com| www.134815.com-好彩蓝莓爆多少钱| www.639049.com-体彩审批手续| www.192575.com-江苏快三今天推荐| www.336535.com-博大彩票下载| www.480228.com-彩宝贝杀红-| www.577010.com-好彩店滚球-| www.665638.com-七乐彩最新预测| www.761644.com-韩国彩票玩法规则| www.26938.com-体彩一等奖是多少| www.917327.com-重庆市福利彩票中心| www.909600.com-3d银海彩报第一版| 3G彩票www.c141.vip| www.632.mobi-福彩快乐12规则| www.6660.live-皇帝彩票红包任你| www.23822.com-爱购彩票网址| www.095234.com-重庆时时彩个人经验| www.353597.com-苏国京彩票重启| www.487677.com-趋势王彩票分析视频| www.565548.com-玩彩票龙虎怎么看| www.632172.com-重庆十人彩-| www.731421.com-快3中彩网大数据| www.806599.com-彩票第32期-| www.873514.com-易购彩票靠谱吗| www.345021.com-大发彩票怎么注册| www.486333.com-极速赛车是国家彩票| www.579320.com-火风彩票-| www.666454.com-重庆彩个位盈利计划| www.771544.com-时时彩安卓app| www.620322.com-美国彩票网上能买吗| www.9672.cn-时时彩分析走势图| www.77936.com-福彩3d三毛天中图| www.043250.com-极速时时彩平台| www.846.in-3d家彩-| www.787894.com-六彩开彩结果| www.27253.com-贵州休育彩票网| www.0094.net-霸气竞彩名字| www.75126.com-乐透啦彩票安全吗| www.049447.com-彩票教学视频| www.151645.com-比较正规的彩票软件| www.268157.com-福彩2d中奖金额表| www.427980.com-分析足彩什么软件好| www.077730.com-七乐彩的中奖号码| www.210888.cc-快彩网骗局-| www.305798.com-彩票只买一注| www.456775.com-今期四不像彩肖彩图| www.794545.com-手机赌博玩分分时彩| www.16165.com-国家认证彩票app| www.4544.com-有人买彩票中奖的吗| www.15396.cc-嘉兴市福利彩票网| www.589718.cc-好彩开门入什么意思| www.wb98.com-福彩快三中奖表| www.252616.com-中彩网软件压铸| www.805118.com-竞彩软件哪个好| www.897801.com-福利彩票宣传用语| www.972217.com-鸿运五分彩走势图| 500万彩票www.www.98528f.com| www.126555.com-湖北彩票案-| www.328466.com-河北彩票开奖大全| www.66rw.com-888彩票兼职| www.090809.com-go彩票下载-| www.542189.com-彩票360合不合法| www.676938.com-彩色的包装袋机器| www.wi95.com-下载甘肃体彩快三| www.u29.cc-安徽快三和值玩法| www.0818.cn-普通彩票店胜负彩| www.12367.com-105彩票码下载| www.61568.com-快三计划数据| www.091234.com-微微彩票官网| www.237049.com-竞彩投注网站| www.319667.com-百胜快三下载安装| www.011255.com-前天彩票中奖号码| www.239866.com-快购彩票软件| www.51160.com-彩乐乐专家杀号汇总| www.21525.cc-网上彩票骗局| www.106626.com-世界杯足球彩票让球| www.600044.cc-竞彩胜平负数据| www.592700.com-彩虹七号普通多少钱| www.681946.com-全中民彩票-| www.772078.com-彩票挂机软件有哪些| www.856528.com-七星彩经典彩版| www.979215.com-广州好彩香烟多少钱| www.bf90.com-黑彩平台注册| www.wy10.com-七星彩论坛特区| www.52ep.com-水彩手绘花卉小清新| www.676838.com-彩妆批发进货渠道| www.773019.com-复式彩票奖金计算器| www.874462.com-七乐彩走势图带线| www.949600.com-cp136好彩票| 网易彩票www.088wy.com| www.557012.com-28彩票官网下载| www.73417.com-彩圣网全年资料| www.1995.love-济南和彩日本料理| www.375557.com-8gcp彩票网址| www.15892.cc-休彩360杀号| www.78738.com-123彩票安卓版| www.542898.com-双色球江苏福彩| www.671342.com-彩独2完整版| www.870714.com-彩票賺錢-| www.983240.com-盈彩把钱提得出来不| www.rn79.com-深圳快乐彩开奖结果| www.606766.com-世界杯彩票竞猜软件| www.86480.com-福彩黄金胆码查询| www.14ha.com-体育彩票竞猜开奖| www.1738.biz-爱购彩彩票-| www.973935.com-全球彩票合法吗| 大彩网www.193195.com| www.ei82.com-8年玩彩经验| www.sn30.com-今日竞彩信息|