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.128488.com-大乐透的中奖彩票| www.32627.com-竞彩足球完整版| www.16fb.com-k彩是真的吗| www.8756.loan-顺盈彩票靠谱吗| www.87248.com-买彩票不中-| www.50766.com-湖北体彩快开奖结果| www.61205.com-航天彩虹镇商铺| www.f53.club-香港有线球彩台网址| www.fc24.com-福彩快三河北走势| www.01nb.com-羽泉《彩虹》吉他谱| www.929063.com-买福利彩票的风险| www.997171.com-中彩网网址登录| www.bt18.cc-乐彩网猜单双| www.vi73.com-湖北福彩网公告| www.18tt.com-七乐彩周末开奖吗| www.116138.com-彩库宝典1.3.0| www.839687.com-彩色耐磨地坪涂料| www.937532.com-体彩网七星彩开奖| 网易彩票www.wycp2.com| www.298055.com-人人彩票网app| www.378342.com-彩虹6号买了后悔| www.ep21.com-体彩独胆双胆| www.vx07.com-体彩5d走势图| www.99rx.com-福彩快三摇骰子官网| www.4582.biz-店里彩票怎么买| www.11384.com-胜负彩14场直播| www.40pg.com-预彩资讯-| www.849.cm-彩8论坛-| www.1849.club-网络博彩推广| www.0tq.com-彩票中心主任贪污| www.67co.com-百乐门彩票网站| www.982612.com-盈彩彩票登录网址| www.no1.com-南粤36选7好彩3| www.vo95.com-快三大小怎么看走势| www.11ur.com-500彩粟网-| www.77qf.com-博彩业在五行中属性| www.4277.biz-老乐看彩3d推荐| www.022426.com-彩票诗句大全| www.822664.com-彩38源码下载| www.915078.com-安装体彩天下| www.970227.com-盛邦财团彩票| www.ri02.com-有人叫我玩快三| www.952338.com-二四六天天好彩数字| www.837765.com-竞彩黑单最长几天| www.948678.com-福利彩票年销售额| www.ap70.com-甘肃快三一定牛推测| www.3685.in-竞彩权威推荐| www.520.name-福彩双色球彩票| www.gn66.com-快三大小单双稳赚群| www.551779.com-首页购彩中心| www.07300.cc-北京福彩28| www.033868.com-彩票机选中了一等奖| www.153023.com-够力七星彩奖表官网| www.244839.com-彩票双色球模拟选号| www.398383.com-彩票网站找人代打| www.4040.cn-中国博彩牌照| www.38ze.com-噢客竞彩手机网址| www.3477.site-中利彩票app| www.695560.com-6彩近期竞猜| www.779686.com-彩票店经营新思路| www.936004.com-分分彩64组万能码| www.568960.com-老重庆时彩时彩| www.679513.com-彩经彩票骗局| www.777773.com-中国彩吧一-| www.862985.com-安徽快三中奖图| www.933228.com-买彩票最多的省份| www.998787.com-中国体育彩票内| www.ef74.com-58彩票下载安装| www.yg77.com-七星彩18103期| www.56dh.com-福彩3d组选图表| www.987332.com-本网赚是福彩快三| www.fv05.com-兼职帮投福彩游戏| www.071881.com-白小姐信封彩图最新| www.178914.com-河南快三26期| www.09011.com-福彩官方微信公众号| www.17348.com-彩神软件破解版| www.025741.com-福彩家彩网专家杀码| www.125172.com-彩票如何选号规律| www.88640.cc-梦到自己中彩票大奖| www.350990.com-团彩网官网-| www.892572.com-有人知道彩票榜吗| www.971543.com-排列五中奖彩票票样| www.sk8.cc-快三大小单双走势图| www.777756.com-978彩票正规吗| www.942778.com-为什么讨厌刚力彩芽| www.cf4.com-安微快三形态走势图| www.yd87.com-好彩官方版-| www.181662.com-福彩快三买大小网站| www.373051.com-新浪爱彩胜负彩预测| www.535895.com-身边中彩票大奖| www.655020.com-买彩票官方客户端| www.722676.com-足彩竟猜-| www.132508.com-足彩四串一-| www.739082.com-彩神通破解版| www.44hf.com-竞彩7串8容错几场| www.641991.com-彩票方格-| www.r72.net-高频彩平台出租价格| www.51mu.cc-足彩500奖金分析| www.741.mobi-时时彩五星一注一元| www.3763.cc-彩票大-| www.5547.me-小鸡彩虹第二季| www.188713.com-快三顺龙技巧| www.cy39.com-仿造彩票打印软件| www.856901.com-开彩票站流程| www.973057.com-彩虹世界男同软件| www.629023.com-彩票中奖新闻真实性| www.ki87.com-辽宁体彩官网首页| www.59397.cc-艾彩-| www.046456.com-天天彩票怎么下载| www.877933.com-3d牛彩网一-| www.965013.com-常州福彩中奖规则| www.cai0544.com福彩快三河南| www.iy39.com-中国福彩开奖号码| www.040958.com-中国福彩购彩大厅| www.271623.com-好彩1生肖码| www.365486.cc-彩天地靠谱吗| www.545250.com-快三怎样能稳赚视频| www.1338.wang-体育彩票选地址| www.451959.com-太原彩票生意好做吗| www.295589.com-彩票开奖查1询| www.113469.com-用qq怎样买彩票| www.202691.com-福彩快三一定牛| www.273776.com-吉林省新快三开奖| www.352888.com-v8彩票网址| www.675487.com-网上彩票app靠谱| www.755681.com-3d旺彩网3b字谜| www.427744.com-山东福彩20选5| www.579634.com-甘肃贵族快三查询| www.681572.com-全民中彩票app| www.812691.com-999彩票软件下载| www.937057.com-官方彩福彩票| 华彩www.71399y.com| www.6999.pro-福利彩票限号规则| www.36999.cc-官彩是什么-| www.85755.cc-江苏体彩排列五| www.309256.com-网上购彩怎么兑奖| www.37578.com-福利彩票有人中过吗| www.037795.com-快三和值有奖金吗| www.73se.com-福彩三的预测| www.561672.com-彩票图怎么看性别| www.0322.net-许昌福彩体彩转让| www.977293.com-南阳彩礼哪里高| www.o86.org-彩票规则介绍双色球| www.051449.com-彩票位和值怎么算| 大赢家彩票www.599280.com| www.119894.com-宝马彩票彩平台| www.204727.com-江西快三网站| www.729965.com-九鼎彩票35258| www.87033.com-彩神v11在维护| www.053758.com-竞彩足球投注怎么买| www.132019.com-河南彩礼顺口| www.971666.cc-大牌彩票官网| www.w33.top-武汉体彩中心电话| www.5340.cc-1号彩票注册平台| www.76po.com-几点后不能买彩票| www.151134.com-本港彩票免费三肖| www.221815.com-倍投彩票可靠吗| www.293764.com-彩票42-| www.353144.com-网易幸运彩票| www.416021.com-时时彩半顺的玩法| www.5xp.com-168彩票投注技巧| www.912952.com-体彩三地-| www.50fv.com-快三职业彩民一天| www.1917.vip-时时彩稳赢投注技巧|