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.18hf.com-500亿彩票网站| www.200077.com-体彩排3-| www.287352.com-网上哪里可以买足彩| www.708316.com-彩票诈骗网站| www.796724.com-幸运五分彩开奖记录| www.872181.com-搜索彩票双色球| www.970316.com-七彩今晚开奖结果| www.cai907.cc-内蒙快三走势图| www.kf78.com-手机买彩票真实吗| www.m20.com-51彩票网是真的吗| www.95632.cc-彩票怎么做资金规划| www.725733.com-福彩一双色球下载| www.840427.com-北京结婚彩礼| www.916933.com-水溶彩铅画教程| www.977156.com-濮阳彩礼限高令| www.sb6.com-江西福彩中心| www.52gj.cc-无锡最新彩礼| www.0298.net-彩票店开在哪里好| www.018849.com-快三预测大小| www.97qr.com-哪个新平台送彩金| www.3261.cn-内蒙古快三未出号| www.066256.com-3d图3d彩票-| www.997649.com-快中彩找不到开奖| www.py60.com-518官方彩票网投| www.13lk.com-好彩一条多少钱| www.0054.org-福彩p62中奖两数| www.131042.com-2018林州彩礼| www.247988.com-澳门3d彩报-| www.352716.com-博黑彩平台-| www.332866.com-新浪足球彩票开奖| www.117890.com-3分时时彩在线计划| www.22ky.cc-ss456盛世彩票| www.553404.com-邯郸彩票有人中奖| www.05810.com-买彩票怎么推广| www.71pm.com-关于买彩票的诗句| www.2393.vip-彩乐建设-| www.8596.loan-彩经网彩票-| www.086393.com-彩客彩票307旧版| www.985431.com-竞彩网三地开奖直播| www.hb89.com-时时彩诈骗最新案| www.p37.org-叫你看彩票曲线图| www.79ck.com-天吉彩票沦坛| www.70909.cc-彩票的中奖号码查询| www.7900.net-曼德尔的彩票公式| www.507244.com-彩票世界的永久官网| www.cp6100.com-内蒙快三跨度走势图| www.299106.com-大发时时彩万位计划| www.632638.com-七彩视界安全吗| www.8800.love-分分彩选号-| www.lz89.com-腾讯时时彩官方网站| www.103011.com-越战越勇中两次彩票| www.202382.com-重庆体彩-| www.304416.com-分分快三作弊器免费| www.379083.com-竞彩论坛-| www.513608.com-海南私彩长条规律图| www.594973.com-好彩赢三张下载| www.295060.com-十分彩一分钟快3| www.421661.com-四季彩票下载安装| www.787754.com-彩客化学创始人| www.972068.com-王者彩票真的吗| www.pj35.cc-彩票快3有什么技巧| www.363904.com-彩虹色的意思是什么| www.819363.com-竞彩秘诀-| www.69lp.com-澳客网怎么买彩票| www.48nv.com-重庆时时开彩结果老| www.762397.com-87彩店app停用| www.620369.com-彩色水磨石施工方案| www.016162.com-双色球彩票开奖频道| www.000334.com-天津时时彩开奖图| www.s12.me-天天盈球竞彩大势| www.wx99.cc-i北京快三助手| www.222.pink-时时彩3分钟一期| www.6386.cc-彩票代理注册公司| 500彩票www.50064c.com| www.656093.com-星彩代挂-| www.884932.com-彩神网提现不到账| www.sv84.com-7星彩中奖规则和钱| www.762239.com-3d福彩字谜定位二| www.766332.com-福彩时时彩20选8| www.915027.com-天天快三幸运快三| www.ax37.com-七乐彩截止购买时间| www.091455.com-彩票感情骗局| www.22zi.com-体彩周末可以兑奖吗| www.573.com-时时彩怎么杀码| www.193729.com-福彩开奖25选5| www.036303.com-福彩3d大数据软件| www.110087.com-体彩北京领奖地址| www.897684.com-广东福彩官方网站| www.522439.com-人人盈彩票-| www.109210.com-六给给彩开奖结果| www.035508.com-彩票统计软件哪个好| www.311853.com-体彩e球彩101期| www.916607.com-黑客攻击黑彩网事件| www.94ip.com-彩票顶级包网| www.907890.com-合肥彩票店铺转让| 福彩网www.5522t.cc| www.525961.com-香港七星彩几点停售| www.14587.com-七星彩直选计算器| www.sy51.com-七星彩规则说明| www.948598.com-中国福利彩票刮刮卡| www.tu63.com-谁买彩票中过一千万| www.53nk.com-凤凰微彩下载| www.5925.wang-健康的标准五快三好| www.67638.com-公务员买彩票中奖| www.7109.cm-助赢彩票计算器下载| www.57568.com-福彩双色球复式预测| www.8777.com-足彩推荐预测app| www.29900.cc-乐彩网历史数据统计| www.68007.cc-微信腾讯彩票游戏| www.122864.com-彩53官网-| www.899352.com-博发网彩票-| 鑫亿彩www.197091.com| www.262283.com-皇都彩票安卓登录| www.454511.com-皇冠彩票6388| www.615937.com-美狮彩票网站| www.7847.biz-快三开奖吉林快三| www.582782.com-128福彩有危险吗| www.419228.com-买体彩用什么软件好| www.004340.com-体彩足彩竞猜类型| www.198582.com-体育彩票开奖| www.716225.com-福彩和体彩的真实性| www.25657.com-菜鸟彩票登录| www.539908.com-彩票短期规律工具| www.615351.com-体彩七位随机号码| www.702988.com-竞彩比分方法| www.785946.com-体彩字迷打印版| www.854810.com-彩运快三靠谱吗| www.911137.com-河北快三投注速查表| www.963454.com-手绘桃花图片彩铅画| 大赢家彩票平台www.810715.com| www.28xw.com-搜狐福利彩票预测| www.89mj.com-彩票出兑-| www.1582.cc-晓风彩票软件破解版| www.5280.site-腾讯分分彩后三胆码| www.79855.com-贵州体彩网站| www.160822.com-宁夏快三怎么中奖| www.091054.com-彩票负盈利打法| www.932555.com-快三平台怎么查| www.ev0.com-福彩双色球玩法| www.sp15.com-时时彩数据遗漏| www.69613.com-玩99彩票-| www.902067.com-告别黑彩-| www.980971.com-浩博彩票出了什么事| 新盈彩www.xinyc8.com| www.113475.com-qq上买彩票-| www.301620.com-今天七星彩现场直播| www.368607.com-七星彩抓规神器苹果| www.88647.com-微信在哪里下注彩票| www.684199.com-下载彩八app| www.646441.com-一分快三心得| www.719632.com-彩票的税率是多少钱| www.828800.com-2m彩票-| www.896116.com-合买彩票网站怎么买| www.791795.com-福彩手机怎么兑奖| www.857848.com-雪绿园足彩比分直播| www.788790.com-8080c彩票开奖| www.872057.com-彩票查询七乐彩| www.027018.com-八号彩票软件| 500彩票网www.690776.com| www.865734.com-赢多彩票-| www.963014.com-彩票开奖历史对比器| 博汇www.865820.com| www.5185.biz-舟山飞鱼彩票开奖号| www.650121.com-小班游戏教案彩虹伞|