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天

知道了
百盈PK10 www.817932.com-足彩19031对战| www.967493.com-买彩票导师-| www.cp3766.com-幸运快三是哪里的| www.999706.com-长沙彩票中奖| www.yd07.com-快三平台黑名单| www.562406.com-时时彩被骗-| www.827617.com-大奖三分彩怎么玩| www.306654.com-天津彩票网-| www.849168.com-今天晚上彩票出奖号| www.989608.com-彩51平台-| www.ak18.com-七星彩35期开奖| www.b10.name-最稳定的彩票网站| www.656768.com-柬埔寨博彩公司排名| www.22hz.com-高频福彩pc-| www.7140.net-时时彩好赚钱吗| www.71ih.com-竟彩足球赛果开奖| www.956141.com-速赢彩是哪年注册的| www.454303.com-彩票网站有假的吗| www.8968.bid-众彩网首页登录入口| www.869156.com-彩票中奖牛人爆秘诀| www.958826.com-春节后福彩几号开售| www.cp145.com-韩国快三开奖结果| www.597897.com-福满天体彩店| www.765974.com-天天爱彩票买不了| www.839844.com-体彩文化建设| www.921240.com-彩票什么是龙虎呀| 吉利彩票www.66376w.com| www.ja29.com-时时彩计划群里的托| www.974617.com-体彩排列五乐天预测| www.96xs.com-彩排的意义-| www.50726.com-乐盈彩票实力铸造| www.251568.com-一号彩票登录| www.2644.xyz-官方时时彩票| www.155421.com-高频彩票网站送彩金| www.37hv.com-七星彩表下载安装| www.732570.com-体彩排三19050| www.68140.com-体育竞技彩票倍投| www.33ch.com-体彩排三正版天庚| www.176751.com-新韩国快三开奖| www.503863.com-博亚彩票app下载| www.00si.com-形容彩虹的成语| www.615993.com-福彩领奖强制捐款| www.137320.com-贵州中国福利彩票| www.134527.com-缅甸好彩柠檬双爆| www.mc03.com-福建快三预选| www.0453.loan-金多彩网站-| www.033620.com-做彩票帮投是真的吗| www.13698.com-竞彩对冲国家会管吗| www.679439.com-至尊彩-app官网| www.76vc.com-广州福利彩票监督| www.095795.com-竞彩彩票下载| www.210632.com-快彩网-| www.962086.com-足球彩票怎么买输赢| www.kx03.com-大发快三有假吗| www.16879.com-v98彩票-| www.125160.com-买彩票如何中奖| www.754047.com-分分彩挂机论坛| www.184969.com-今日快三重奖号| www.781348.com-微知彩票-| www.860240.com-彩61平台下载| www.942566.com-博友彩是什么| 福彩天下www.fcff9.com| www.200965.com-天律快三开奖| www.129705.com-七乐彩走势中彩网| www.169174.com-安微省快三开奖结果| www.n95.biz-福彩5分快3-| www.055312.com-hc好彩网app| www.879796.com-吉林快三盘-| www.946531.com-福建福彩电脑版| 华人彩票www.hr5888.com| www.487680.com-好彩网1184-| www.9921.org-意彩注册网址| www.123557.com-5k彩票手机领导者| www.000468.com-金华体彩阳光征召| www.27916.cc-玩彩票能赚钱吗| www.85355.com-购彩助手软件手机版| www.091574.com-春秋彩票登录网页版| www.219844.com-快彩荐号专家| www.296038.com-多乐彩十一选五走势| www.380662.com-超级大乐透彩票规则| www.550169.com-彩票合买合法吗| www.625613.com-牛彩3d谜-| www.722710.com-秒秒彩有漏洞吗| www.884535.com-福彩3d彩彩报| www.962656.com-六开彩开奖结果| www.dj2.cc-玩快三有什么技巧| www.984181.com-糖果彩快3-| www.4253.vip-优乐彩怎么样| www.959806.com-时时彩对冲套利方法| 网易彩票www.07163g.com| www.a67.pw-d福彩-| www.03499.com-怎样才能戒掉买彩票| www.567267.com-白沟旋风彩虹机| www.232299.com-今天足彩十四场对阵| www.660038.com-彩票3阳光探码图| www.772438.com-7星彩票开奖走势| www.890087.com-8亿彩是真的假的| www.975343.com-加团队买彩票| www.63wz.com-彩票软件平台哪个好| www.342254.com-电玩城玩什么彩票多| www.462509.com-好彩大发是什么意思| www.11684.com-泰国彩票网-| www.508587.com-成都彩票兑奖流程| www.579489.com-体彩排列三荐号| www.654965.com-雷州七星彩南国论坛| www.716646.com-彩铅画人物背影古风| www.781611.com-头头体育博彩客户端| www.31788.cc-唯彩看球老版本下载| www.71011.com-qq彩票怎么没有了| www.713263.com-体彩7位数开奖查询| www.8697.cn-博彩源码转让| www.265887.com-宁夏福彩中心官网| www.pm4.com-贵州快三提前预测| www.920975.com-中国福彩网上购买| www.817139.com-58彩158彩开奖| www.970534.com-河北省福彩排列七| www.ea62.com-重庆市福彩官方网| www.06111.com-中福快开彩票| www.029537.com-利彩快3必中软件| www.264813.com-cp360彩票-| www.444045.com-三维心脏彩超正常值| www.714783.com-福彩五分彩全天计划| www.868178.com-体彩七星彩跨度| www.tl50.com-江苏福彩快三遗漏| www.9683.in-彩一万官方网址| www.077751.com-海南彩票快速玩法| www.102977.com-配送员中彩票| www.43ir.com-北京招聘竞彩分析师| www.0898.net-华夏彩票怎么玩| www.377331.com-因彩礼钱分手值得吗| www.739305.com-江苏快三稳赚| www.zo6.com-qq彩票-| www.020215.com-体彩排列3开奖| www.796105.com-如何选彩票号| www.562233.com-万彩动画激活码| www.356294.com-彩票算法编程| www.434678.com-第九彩票是什么意思| www.541458.com-k彩客服登录| www.604993.com-超级大乐彩开奖视频| www.665746.com-万家彩票网一站| www.291166.com-南方双彩五行| www.092639.com-高手彩坛彩民盛杰| www.cai127.com-贵州快三开奖结果| www.127475.com-彩库宝典2015| www.900860.com-e赢彩app-| www.984396.com-安徵快三时时彩技巧| www.g71.com-彩经网新版-| www.519785.com-时时彩推波高手改版| www.204306.com-江苏快三走势跨度图| 彩票8www.cp8004.cc| www.165061.com-彩票012-| www.355330.com-玩快三输了三万块钱| www.555388.com-旭辉研彩-| www.684700.com-福彩3d跨7的号码| www.31851.com-足彩比分彩票| www.62748.com-神马六给彩票| www.610532.com-阿彩凤凰错替嫁弃妃| www.017261.com-凤凰彩票平台合法吗| www.637254.com-彩虹电视台在线直播| www.061455.com-我去彩票站怎么样| www.71146.com-福彩3d彩民乐| www.375621.com-五星电玩城彩金| www.949820.com-7乐彩票-| www.77598.com-新宝彩票平台|