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天

知道了
彩01彩票 www.572787.com-一分快三豹子计划| www.921009.com-全球彩票网址是什么| www.cai2344.com湖湖北快三开奖结果| www.407417.com-新浪爱彩比分直播网| www.588565.com-8848彩票平台| www.735956.com-新浪彩票_首页| www.908243.com-国彩网址是什么| www.cai1236.com易彩快3-| www.118559.com-怎么想最容易中彩票| www.331688.cc-彩票官网软件是哪个| www.421487.com-今晚七星彩预测号| www.690786.com-足彩19055期| www.807831.com-竞彩网帮助中心| www.884554.com-彩吧网排列三试机号| www.964792.com-分分彩赢彩计划| www.yo69.cc-体彩七位数怎么买| www.762615.com-靠谱的网络彩票网站| www.4071.org-3的走势图彩吧助手| www.10564.com-关小刀足彩任9预测| www.53239.cc-时时彩人工计划稳定| www.971814.com-创彩app-| www.ek46.com-快三最好的预测软件| www.yl88.com-彩票大乐透开奖时间| www.329810.com-中国彩吧论坛天齐网| www.244029.com-彩票走-| www.344482.com-国家体彩网官网| www.089030.com-休彩试机号-| www.182766.com-大发快三登录网站| www.761319.com-宝马娱乐平台彩票| www.ru22.com-破解版彩票-| www.1911.cc-彩福快三是官方的吗| www.606063.com-博盈彩票是不是骗局| www.0096.xyz-有寓意的体彩店名字| www.349788.com-彩民卡客户端| www.480221.com-新浪竞彩北单| www.568873.com-幸运彩骗局-| www.678439.com-福彩论坛彩界大将军| www.791126.com-彩票选号怎么选的| www.919000.com-杀码3d专家家彩网| www.990909.com-网络快三购买| www.os24.com-手机彩票是否合法| www.27rd.com-二四六天天好彩资料| www.0090.pro-有关彩票的昵称| www.7177.com-博彩有规律吗| www.77597.cc-彩票谜语什么意思| www.085771.com-吉林快三三同号预测| www.84595.com-福彩领导贪污| www.113818.com-腾讯一分彩计划全天| www.399956.com-青蛙彩47期特马图| www.673389.com-双色乐彩论坛静态版| www.814899.com-网卡彩票有问题吗| www.dd12.cc-具前景的体育彩票店| www.c26.me-新派彩-| www.65fy.com-3d梁博说彩公众号| www.116097.com-3分彩开奖结果| www.630718.com-排五彩票走势图| www.15119.cc-福彩双色球单式玩法| www.031315.com-下彩彩票客户端安卓| www.567617.com-江苏大发快三下载| www.110353.com-福利彩3d怎么买| www.700799.com-彩票通怎么下载| www.27ph.com-博都彩票-| www.131006.cc-河南驻马店彩礼| www.206802.com-阿里彩票骗局| www.265335.com-最新彩票信息| www.084949.com-体彩高频机顶盒| www.057028.com-安徽快三在哪里买| www.136906.com-附近福彩-| www.986461.com-nba竟彩-| www.gy69.com-8彩官网-| www.yu84.com-彩票机打中奖| www.47qv.com-广西体彩大乐透巨奖| www.940.live-概率论与彩票| www.23504.com-支付宝买彩票可靠吗| www.84289.com-七星彩梦册查码全册| www.831577.com-福彩销量下滑原因| www.27020.com-新2彩票论坛资| www.21gp.com-春秋彩票注册| www.226148.com-彩票追号概率| www.430221.com-中国足彩网百家指数| www.509815.com-缤果彩票是不是骗局| www.635097.com-七彩国际影城会员卡| www.751062.com-福网彩app下载| www.655626.com-拍彩票面秒查奖金| www.897789.com-体育彩票打广告词| www.986556.com-彩票578下载| www.ir1.com-信誉最好私彩平台| www.923932.com-支付宝能买彩票吗| 500万彩票www.96386s.com| www.969839.com-快乐双彩历史开奖| www.25iz.com-华彩音乐术语| www.768331.com-爱彩乐邀请码| www.234154.com-安徽福彩中心| www.fa68.com-瑞彩祥云v8-| www.l57.top-彩66-| www.63jy.com-彩金卖多少钱一克| www.763086.com-四亿彩赠送41| www.4552.xyz-关于彩票中奖的小说| 大赢家彩票平台www.287926.com| www.vi47.com-黑龙江福彩官网下载| www.08hl.com-七星彩txt微盘| www.390178.com-彩票02-| www.253211.com-时时彩全天计划蜂巢| www.271455.com-好彩香烟1871| www.67ol.com-彩金用收米的app| www.203427.com-上海快三11和值| www.319438.com-彩票中奖新闻生成器| www.966136.com-福彩中奖信息| www.mg52.com-福彩快三内蒙| www.30me.com-彩虹世界软件下载| www.082223.com-能玩天津时时彩漏洞| www.if95.com-福彩3d杀尾跨大全| www.97993.com-新加坡六福彩走势图| www.710789.com-刷彩票流水是什么| www.756.tv-时时彩走势图彩票| www.967567.com-体彩大乐透选号大师| 51彩票www.699915.com| www.222909.com-彩票预测下载| www.309557.com-一等奖中奖彩票图片| www.872108.com-贵阳体彩中心在哪| www.946992.com-彩票破解版软件下载| www.991676.com-彩吧vip平台| www.kb0.cc-江苏新快三开奖结果| www.qd71.com-第一彩票下载安装| www.161685.com-三第彩票-| www.97yt.com-快三单双技巧规律| www.73737.cc-竞彩猫收费太贵| www.27119.cc-两元彩票走势图| www.0444.vip-彩票群规怎么写| www.196697.com-褔彩体彩开奖结果| www.778708.com-8号彩票幸运飞艇| www.229912.com-彩票榜分分快三| www.700675.com-下载山东省福彩| www.780910.com-彩虹条纹t恤女| www.903468.com-下载赢彩吧app| 彩虹8www.ch8123.com| www.398538.com-七星彩都礼拜几开奖| www.997753.com-8k彩票网-| www.280034.com-重庆时时彩1999| www.080773.com-香港星彩txvip| www.237720.com-福彩快3和值表奖金| www.84846.com-金乡福利彩票机构| www.487876.com-趋势王彩票下载| www.56ua.com-港澳彩平台下载| www.863554.com-彩票采集器修复教程| www.960048.com-牛彩摘彩收录机论坛| www.ld5.cc-e球彩常用奖金表| www.655310.com-微彩宝五分彩走势图| www.954046.com-中国竞彩联盟| www.98893.com-彩云而来专家专栏| www.146601.com-福星福彩预测| www.771343.com-彩票81软件-| www.871908.com-瑞彩祥云网页版| www.930866.com-彩8彩票安卓官网| www.974280.com-彩虹旗泡弟手机版| www.095985.com-官方网上购彩平台| www.573824.com-彩票数字拾取算法| www.087000.com-彩票中奖故事最新| 星际www.910xj.com| www.220025.com-大发快三如何看大小| www.289606.com-快三有赚钱的吗| www.x68.cn-506彩票下载| www.3724.pw-彩站初几营业| www.91fn.com-十三彩-|