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.162630.com-手机456彩票下载| www.805269.com-7乐彩玩法说明| www.880865.com-澳博快开彩票| www.982114.com-下载577彩票网站| www.qk7.com-福建体彩选号技巧| www.604405.com-688彩票网怎么样| www.945631.com-福建体彩90512| 大赢家彩票网www.178795.com| www.871483.com-三分时时彩预测计划| www.957852.com-彩帝彩票app| 彩吧www.586960.com| www.kg70.com-快彩是国家的吗| www.g39.net-p三彩经网-| www.60cn.com-足彩比分怎么看| www.472520.com-③d彩涂迷-| www.313096.com-福彩牛彩字谜总汇| www.433099.com-铜仁市体彩中心| www.530633.com-彩铅花卉玫瑰花| www.352138.com-今日彩票平台怎么样| www.53219.cc-时彩后一技巧稳赚法| www.71577.cc-卓易彩票平台| www.297292.com-大发快三投注心得| www.493659.com-热购彩票大全| www.683171.com-深圳彩票实名| www.577131.com-好彩店骗子-| www.168345.com-宁夏快三今日走势图| www.083115.com-北京福彩在哪兑奖| www.am79.cc-福利彩票快三预测| www.0108.vip-中彩票的下场| www.107099.com-下载新天地彩票| www.273039.com-彩票资金分配比例| www.407203.com-下载中彩网3d| www.580427.com-今晚六会彩结果果| www.705739.com-辽宁体彩发行中心| www.844489.com-中国有没有中彩票的| www.956509.com-富贵彩票犯法吗| www.ep42.com-盈彩网是骗局吗| www.568149.com-福利彩票宣传音频| www.732250.com-河南省体育彩票电话| www.955125.com-破解彩票系统| www.1659.top-甘肃快三加奖| www.51629.cc-好运彩彩票骗局| www.154888.cc-竞彩2选1玩法介绍| www.618961.com-福彩消消乐中25万| www.881597.com-博彩足球软件有哪些| www.9559.win-买彩票数字要求几位| www.060692.com-黑彩买到多少违法| www.695033.com-号百彩票千亿彩票| www.678309.com-电脑版乐彩论坛| www.64yn.com-汇彩网怎么注册| www.172683.com-幸运快三计划免费版| www.6060.pw-彩票数字筛选器| www.347455.com-成语添光溢彩| www.037389.com-山西省体彩兑奖流程| www.569557.com-微彩吧是骗局| www.032975.com-彩票137下载| www.245788.com-易彩快三漏洞| www.290323.com-彩宝彩票是骗局吗| www.29ht.com-彩票投诉-| www.397903.com-好乐彩app-| www.214949.com-湖北快三害了多少人| www.199452.com-福彩研究生三天计划| www.59896.cc-彩票规律研究方法| www.898.me-临沂体彩中心地址| www.222852.com-各种釉彩大瓶的故事| www.596215.com-甘肃天水福彩中心| www.670718.com-彩票买哪个容易中奖| www.jd11.com-快三跨度开奖结果| www.14sl.com-安徽体彩开奖时间| www.969894.com-江西快三怎么玩稳赚| www.lv9.com-寻找可靠快三平台| www.tz56.com-秒速快三-| www.10yy.com-时时彩有合法| www.811998.com-亮彩家具-| www.907020.com-中国福彩快乐十分| www.980536.com-1068彩票网-| www.kj73.com-福彩3d选号助手| www.65ya.com-566299彩票-| www.26959.cc-新浪彩票官网下载| www.024296.com-500彩票招聘| www.137483.com-足彩14场开奖最快| www.351789.com-卖体彩怎么提成| www.005589.com-时时中彩票下載| www.821555.com-七星彩推荐号| www.yb45.com-有天津时时彩的平台| www.54xk.com-虹桥的彩票专栏| www.687.space-富华彩票平台正规吗| www.964214.com-苏州e球彩开奖| www.671458.com-01彩票是什么软件| www.887280.com-辉煌彩票的骗局| www.ij22.com-安徽快三出什么号码| www.637985.com-体彩哪年发行| www.714288.com-竞猜足彩开奖| www.803673.com-手机购买体彩大乐透| www.891003.com-彩票站开业宣传词| www.962437.com-掌上彩票手机版| www.cai6400.com马来3分彩开奖| www.655497.com-彩民之星去哪里买| www.790803.com-大乐透彩票模拟投注| www.921633.com-91彩神客服-| 日彩网www.rcw789.com| www.692881.com-福利彩票数字3单式| www.771226.com-盐城竞彩店-| www.839868.com-nba竞彩交流群| www.904122.com-华尔兹快三跳法| www.965915.com-51彩票网手机登录| 大赢家彩票平台www.791637.com| www.gd20.com-彩虹六号-| www.wn51.com-下载人人中彩票| www.590322.com-福彩三d画谜字谜九| www.658605.com-福彩群英会在线开奖| www.743888.com-彩票开奖内蒙一选五| www.817356.com-彩七七充值不到账| www.886960.com-网络彩票被骗追回| www.953741.com-竟彩足球下载| www.996862.com-爱乐彩彩票投注平台| www.dc36.com-彩票365下载安装| www.tv47.com-9cb彩计划app| www.3si.cc-登陆艾彩-| www.222341.com-快三有多少种可能| www.102360.com-k彩福地彩票客服| www.131247.com-开封结婚彩礼| www.261068.com-尊彩网是真的假的| www.363519.com-誉鼎国际彩票骗局| www.373805.com-福彩七乐彩特别号码| www.478699.com-新浪彩通电话| www.as53.com-彩票平台制作排行榜| www.18up.cc-今晚七乐彩几点开奖| www.786.red-大乐透复式彩票| www.4268.in-诚信的彩票合买系统| www.8905.cm-竞彩4串1-| www.132749.com-新新彩票走势网首页| www.251227.com-彩票22app-| www.321820.com-百度爱彩票-| www.386290.com-彩票是随机还是人为| www.489258.com-彩工网下载-| www.579038.com-甘肃福彩主任| www.9328.net-今天体彩中奖号| www.023957.com-境外网络彩票| www.260986.com-买彩票选号技巧规律| www.517342.com-高频彩老平台| www.cp4.biz-快三app-| www.295660.com-幸运时时彩5码计划| www.385212.com-中奖的彩票足彩图片| www.550343.com-网易彩票网电脑版| www.839313.com-江苏快三怎么下不了| www.cai0200.com安徽快三开奖走势图| www.740716.com-28元彩票-| www.088593.com-新浪杨震足彩博客| www.532068.com-没有彩排作文| www.604918.com-中澳彩票平台| www.676508.com-彩礼退还-| www.751143.com-台湾彩票app| www.809383.com-彩客网官网下载安装| www.874066.com-北京快三走势图查看| www.961455.com-中大奖彩票网官网| www.d35.me-明发彩票app| www.23db.com-天津体彩中心网站| www.87jm.com-鸿运彩票网官网| www.1724.com-江苏体彩七位数选号| www.79573.com-福彩15选5第一位| www.653898.com-快三所有二同号| www.788723.com-七乐彩开奖走势图2| www.892023.com-竞彩足球改期怎么算|