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.426223.com-彩票怎么扫码看中奖| www.317888.com-北京福彩pk10| www.079330.com-吉林快三最新开奖图| www.966316.com-福利彩票数字3| www.181935.com-开个彩票站会亏本吗| www.ao16.com-彩38下载-| www.97084.com-竞彩必发指数新浪网| www.273650.com-体育足彩玩法| www.386109.com-韩国彩票犯法| www.568346.com-红彩绘app下载| www.957885.com-66彩票网登录网址| www.8911.wang-竞彩冷门神单| www.174462.com-快三计划群真的吗| www.263135.com-sh彩票-| www.883099.com-爱投网彩店-| www.285.cc-民权结婚彩礼| www.119232.com-福彩8+1多少钱| www.94qg.com-如何看七星彩走势图| www.uw93.com-广西彩票门户网站| www.7977.net-888彩票下载中心| www.af97.com-520彩票-| www.84747.com-十分彩官网手机下载| www.04305.com-吉林快三出号走势图| www.71056.com-101彩票下载安装| www.682771.com-2019体彩新规定| www.835400.com-联盟抽到炫彩皮肤| www.uy3.cc-彩票123网站| www.763168.com-兰州彩票店几点开门| www.883149.com-澳客爱投彩票| www.964339.com-新浪彩票软件下载| www.an6.com-河北快三跨度和值表| www.9980.xyz-福彩3d小军第一版| www.95im.com-彩友多最新版| www.603635.com-博金彩票app下载| www.oa59.com-98彩票怎样-| www.776830.com-福彩小黄人-| www.887004.com-众发彩票计划| www.961342.com-生彩宝彩票-| 500彩票www.50074i.com| www.791065.com-好彩爆珠毫克| www.20il.com-九彩僵神秦无风| www.139465.com-牛牛赌博彩票| www.606071.com-买彩票买什么号好| www.400464.com-点击彩诈骗-| www.571058.com-彩票时放的歌| www.672901.com-五个人摇彩子怎么玩| www.55ck.com-北京体彩销售电话| www.778123.com-福利彩票喜乐彩| www.59856.cc-66微彩app-| www.544854.com-cc彩票平台官网| www.319779.com-网上购彩的网站| www.378999.com-3的字谜双彩论坛| www.345021.com-大发彩票怎么注册| www.301144.com-彩名堂-| www.406681.com-彩礼的谈判案例分析| www.534118.com-七星彩组选-| www.616782.com-时时彩账号注册网址| www.700932.com-体育足彩竞彩网下载| www.788387.com-体彩5走势图带连线| www.901818.com-体彩五走势图带连线| www.981252.com-排列三新彩网预测| www.fe36.com-快三有多少种可能| www.b75.vip-福彩跑马幸运彩图片| www.1286.in-078彩票经销商| www.085094.com-8号彩票论坛网址| www.10799.cc-竞彩足球购买新浪| www.88392.com-欧美彩票大奖排行榜| www.62666.com-篮球比赛竞彩网| www.024009.com-国外的足彩怎么买| www.820059.com-范县结婚彩礼| www.922690.com-彩客竞彩app下载| www.987658.com-有什么购彩软件| www.fq41.com-竞彩比分500直播| www.g14.bid-海南彩票4个号码| www.46gq.com-高频彩票直播频道| www.515795.com-家庭彩票官司大战| www.cai23.cc-北京快三形态走势图| www.043266.com-时时彩基本知识| www.17598.com-淘宝彩票停售去哪买| www.563131.com-福彩双色球网上能买| www.530108.com-重庆时时彩小鹿软件| www.lr56.com-旺彩双色球最新软件| www.003748.com-江苏老快三跨度振幅| www.147924.com-22彩票网址-| www.995903.com-竞彩足球app排行| www.ak47.com-怎样用手机买七星彩| www.qg36.com-丰彩彩票-| www.0402.wang-彩61官方网站| www.5957.cm-体彩彩吧-| www.60td.com-家彩网胆码天中图库| www.812683.com-福彩3d绝密解码| www.29718.com-湖北福彩中奖| www.231017.com-玩彩票哪个平台可靠| www.379666.com-彩票摇奖机出球原理| www.563396.com-可以查彩票的软件| www.008019.com-重庆时时彩购彩大厅| www.370290.com-福利彩票意义| www.xz66.com-吉祥彩票app| www.22qq.com-梁宏达说彩票股票| www.158062.com-彩投是骗人的吗| www.22028.cc-彩辉纺织-| www.425678.com-彩钢板310板型| www.73cq.com-中国福利彩票赛车| www.7376.cc-色彩画风景简单图片| www.165227.com-跟群计划买彩票| www.263692.com-足球竞彩软件| www.334233.cc-万禧彩票-| www.409067.com-最大的双彩论坛| www.501197.com-97彩票群-| www.557799.com-体彩3第-| www.609757.com-微信体育彩票怎么买| www.678682.com-竞彩足球彩票技巧| www.739404.com-竞彩足球微信群| www.337.tv-彩票守号推荐号码| www.748084.com-彩中彩可以相信吗| www.007330.com-河南体彩大乐透| www.780048.com-今天福彩开奖视频| www.526131.com-世界杯怎么竞彩| www.cai8933.com安徽体彩网十一选五| www.39943.com-博牛彩票是骗人的| www.135263.com-恒大彩票手机登录| www.5833.com-买彩票小程序| www.19014.com-福彩3d复式奖金| www.488.bid-福彩历年中奖号码| www.91826.cc-彩八彩票网站| www.g44.net-七星彩今晚奖结果| www.666529.com-万达商城彩票靠谱吗| www.374188.com-福彩3d精准杀路数| www.195027.com-最新彩民乐-| www.yc6.com-京彩彩票app| www.3606.cn-3d南方双彩票| www.563895.com-淘彩票福彩快三网| www.132463.com-彩妆店怎么开| www.1766.cc-万彩影像大师| www.984081.com-浙江省福利彩票中心| www.bx93.com-彩票中奖软件神器| www.st38.com-彩票中心主任| www.16wh.com-潢川广场福利彩票| www.939558.com-福彩在线怎么下载| www.ga90.com-彩票必赚方法| www.cp6855.com-北京快3彩票店开奖| 好彩头www.hct5.com| www.911871.com-琼海最大私彩老板| www.cs55.com-私彩平台能玩不| www.82td.com-新浪竞彩北单| www.ss22.cc-时时彩怎么盈利| www.46ur.com-体育彩票门店装修| www.273859.com-希望手游三分快三| www.027821.com-投彩带赚骗局| www.85vm.com-彩票平台有漏洞吗| www.47117.com-时时彩茗彩平台| www.073908.com-体彩排三定胆杀号| www.335540.com-快三助手安全吗| www.565448.com-开体彩店去那里申请| www.yd06.com-派彩每日推荐双色球| www.258726.com-中国足彩网老版本| www.11kn.com-河内时时彩计划免费| www.1171.com-彩票格言-| www.088464.com-华夏彩票―代理注册| www.989490.com-福彩双色球四幻球| www.iw71.com-体彩虚拟足球| www.176717.com-极速快三网址| www.242605.com-中彩网双色球预测| www.20.la-足彩买100赢多少|