QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 选项卡/滑动门 > jQuery新零售产品系列滑动选项卡布局代码

原创商用 jQuery新零售产品系列滑动选项卡布局代码

jQuery新零售产品列表tab选项卡布局,悬停标签滑动切换选项卡代码。
分享到微信朋友圈
X
[声明]该素材是本站付费买断的作品代码,享受著作权?;?,未经允许请勿转载,否则追究相应的法律责任。

使用方法:

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/iconfont/iconfont.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="container">
	<h2 class="title">新零售系列产品</h2>
	<div class="desc">
		<strong class="color">新零售:</strong> 即企业以互联网为依托,通过运用
		<span class="color">大数据</span>、<span class="color">人工智能</span>等先进技术手段,对商品的生产、流通与销售过程进行升级改造,进而重塑业态结构与生态圈,并对<span class="color">线上服务</span>、<span class="color">线下体验</span>以及<span class="color">现代物流</span>进行深度融合的零售新模式 。<span class="color">线上线下和物流结合在一起,才会产生新零售。</span>
	</div>
	<div class="content">
		<ul class="product-tab">
			<li class="active">
				<img src="statics/images/product-icon1.png" /> 翼商城
			</li>
			<li>
				<img src="statics/images/product-icon2.png" /> 云ERP+收银狗
			</li>
			<li>
				<img src="statics/images/product-icon3.png" /> 云物流
			</li>
			<li class="line"></li>
		</ul>
	</div>
	<div class="product-list">
		<div class="product-item">
			<div class="product-desc">
				<h3>翼商城</h3>
				<p>智能电商生态系统,支持自营、招商、批发、区域等多模式运营,还可轻松对接物流、ERP、收银等周边系统,帮您打造智能新零售!</p>
				<a href="#" class="btn">了解详情 +</a>
			</div>
			<div class="icon-list">
				<ul>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>全国电商</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>连锁店</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>供应商</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>厂商/经销商</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>农村电商</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>生鲜电商</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>母婴电商</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>连锁超市</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>百货商场</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>其他行业</p>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="product-item hide">
			<div class="product-desc">
				<h3>云ERP+收银狗</h3>
				<p>云ERP+收银狗是SAAS型进销存与收银系统,以多商家入驻、加盟连锁为经营模式,涵盖平台方、商家、收银员等多种角色,进销存核心??榛坊废嗫???晌薹於越由坛窍低?,线上线下结合,实现电商实体一体化管理。<span>*加入商家QQ群大本营,一起交流运营心得吧,QQ群号:279730318</span></p>
				<a href="#" class="btn">了解详情 +</a>
			</div>
			<div class="icon-list">
				<ul>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>果蔬行业</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>餐饮行业</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>服装行业</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>商超行业</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>母婴行业</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>社区行业</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>五金建材</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>快餐外卖</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>咖啡行业</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>校园行业</p>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="product-item hide">
			<div class="product-desc">
				<h3>云物流</h3>
				<p>云物流系统以众包物流为主,自建物流为辅,实现类似滴滴打车的抢单配送。使用云物流系统既可以管理自己的配送团队,也可以整合发单商家和兼职配送人员。<span>*加入商家QQ群大本营,一起交流运营心得吧,QQ群号:292844176</span></p>
				<a href="#" class="btn">了解详情 +</a>
			</div>
			<div class="icon-list">
				<ul>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>水果店</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>便利店</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>蛋糕店</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>茶饮店</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>鲜花店</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>服装店</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>饭店</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>酒店</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>旅行社</p>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="iconfont"></i>
							<p>更多行业</p>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function() {
		// 产品tab切换
		$('.product-tab li').hover(function() {
			$('.product-tab li.line').stop().animate({
				'left': $(this).position().left
			});
			$('.product-list .product-item').stop().eq($(this).index()).show().siblings().hide();
		});
	})
</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
密歇根神奇彩票 www.881963.com-500购彩邀请码| www.79796.cc-彩票上面条码| www.19zh.com-怎么举报时时彩平台| www.511255.com-用彩虹起一个网名| www.687025.com-长沙体育彩票店| www.844125.com-飞腾彩票网址| www.913151.com-胜负彩彩客网| www.668293.com-怎么分辨彩票黑平台| www.258208.com-234彩票网官方版| www.337116.com-中国福利彩票五等奖| www.411188.com-双色球唯彩会| www.512589.com-水溶彩铅的画简单| www.580752.com-福利彩票无手起家| www.654772.com-重庆时时采彩一星买| www.jj61.com-网上那些带你买彩票| www.0ri.cc-七乐彩票是赌博吗| www.88251.cc-lg传统彩哪个网站| www.8129.wang-广西彩票发行中心| www.5508.com-青岛彩票出租| www.020648.com-彩票源码交易| www.168129.com-河北快三遗漏直| www.899985.com-厚街福利彩票站转让| www.982135.com-3d彩票选号神器| www.qq00.com-福彩包括什么| www.453948.com-彩钢泡沫夹芯板价格| www.666732.com-体彩排列五今晚预测| www.bg21.com-彩票黑平台曝光| www.02dp.com-彩迷兔手机-| www.319058.com-河南福彩跑马奖金| www.826322.com-点石彩票-| www.33015.com-体彩官方投诉电话| www.528690.com-浙江体彩31选7| www.817560.com-七星彩交流论坛| www.99391.com-梦见结婚谈彩礼钱| www.090282.com-广西福彩网官方首页| www.733058.com-一分彩计划软件| www.064177.com-致富彩-| www.8359.xyz-海南七星彩小精英版| www.578354.com-腾讯5分彩在哪里| www.682771.com-2019体彩新规定| www.788046.com-陇彩宝app-| www.911682.com-福彩3d拖拉机玩法| www.987863.com-福利彩票29选7| www.dl88.cc-代人玩快三是骗局吗| www.0969.vip-彩虹客服-| www.657393.com-成都摩宝网络彩票| www.773339.com-免费送彩金论坛| www.874171.com-老谢说彩专栏| www.943965.com-体彩手游彩客户端| www.003944.com-盈彩计划app| www.081859.com-七星彩网站去哪里买| www.145655.com-山东群英会百宝彩票| www.224557.com-江苏快三奖金多少| www.681164.com-彩票榜手机app| www.777469.com-ag数据彩票网| www.101004.com-中彩在线怎么玩| www.921903.com-91彩神网页-| www.979393.com-泰国好彩-| www.ih56.com-彩票游戏平台| www.5iv.com-常州福彩点-| www.8327.wang-海南七星彩规则| www.7254.cc-儿童画画彩虹| www.005400.com-306彩票-| www.107011.com-辽宁福彩3d字谜| www.179279.com-快三赚钱骗局揭秘| www.273370.com-福彩刮刮乐-| www.365833.com-彩铅画儿童肖像书| www.531926.com-带菩萨中彩票| --七星彩画规神器| www.39381.cc-公牛网站彩票骗人| www.663372.com-台湾38乐和彩| www.753638.com-做梦买彩票中奖了| www.821535.com-今日的福彩3d图纸| www.890119.com-牛彩3d字谜-| www.989558.com-福彩三d于海滨视频| www.fx38.com-黑彩报警有用吗| www.23eq.com-蓝球竟彩计算器| www.993386.com-足彩新手教程| www.fp48.com-uu快三购彩-| www.2tj.com-买彩票有中奖的吗| www.3958.cm-ll彩票平台有那个| www.51007.cc-西安彩票投注站加盟| www.297420.com-快三真的可以赢钱吗| www.8949.xyz-国彩赚钱吗-| www.872365.com-福彩5等奖多少钱| www.93vg.com-我的彩色梦图画| www.9682.org-布衣彩吧天齐网| www.61226.com-百乐彩是正规网站吗| www.510013.com-彩彩霸高手论坛| www.515.cm-占卜预测彩票| www.33417.com-盛宏彩票首页| www.182008.com-安全的快三app| www.381052.com-彩票拖胆-| www.5dg.com-河内彩-| www.022518.com-快三搭建一条龙| www.630765.com-剪彩花球开业庆典| www.769388.com-买彩票就这几招微盘| www.569921.com-体彩3d开奖查询| www.770254.com-好彩香烟在哪里买| www.904017.com-d8彩票下载安装| www.dq01.com-福彩自助下载苹果版| www.2930.net-体彩甘肃-| www.45178.com-彩票qq营销话术| www.35221.cc-快购彩票网址是多少| www.48480.com-网上买竞彩哪个网站| www.888.hk-彩93彩票好吗| www.44xs.cc-时时彩杂六半顺帖子| www.947.tv-大乐透六星彩| www.518608.com-乐彩ios下载| www.v64.com-中国体彩赛事推存| www.218324.com-三分快三3-| www.88325.cc-春天彩票真的吗| www.042195.com-足球彩票票面怎么看| www.6429.com-彩经网排列5杀号| www.83sw.com-玩全球彩票合法吗| www.299833.com-买彩票上瘾倾家荡产| www.365376.cc-七彩下期开奖| www.448661.com-中国彩票是合法的吗| www.531779.com-在哪买nba篮彩| www.237093.com-彩票资讯网-| www.739455.com-华彩彩票网站| www.061542.com-五分彩不能提现| www.171741.com-安微快三开奖走势图| www.254151.com-福彩十分开奖结果| www.663580.com-香港天空彩票| www.732646.com-南京市体彩中心地址| www.807298.com-最新一期足彩对阵表| www.40890.com-体彩大乐透开奖l| www.571935.com-足彩稳赚买法| www.658489.com-彩视登录解决方法| www.750421.com-豪彩官网-| www.841324.com-怎么拍彩票正面查询| www.911666.com-3d福彩组三怎么玩| www.978147.com-成都彩钢板批发价格| www.cp53.com-极速快三必出码技巧| www.524554.com-乐8网彩票登陆| www.976601.com-山西结婚彩礼多少钱| www.65uf.com-大佬黑彩平台| www.36vh.com-玩uk彩危险吗| www.1228.me-3d彩计划下载安装| www.805155.com-七乐彩7等奖多少钱| www.16616.com-农民彩票大发| www.277975.com-51亿彩票巨奖诞生| www.42984.com-抢红包彩票-| www.81pe.com-乾特商城火箭彩票| www.4443.pw-彩票十一选五内蒙古| www.12431.com-澳客网竞彩足球比分| www.220889.com-分分快三计划网页版| www.485154.com-网络彩票官方投注| www.cp9110.com-购彩吧-| www.852011.com-快三两同号-| www.953009.com-九州彩票真的假的| 名门彩www.33997q.com| www.ll89.com-彩票12官方网站| www.52lo.cc-彩沙涂料-| www.576360.com-竞彩2串1破产| www.661620.com-快乐彩作假-| www.726674.com-彩虹瓶颜色搭配图片| www.802508.com-佰万彩票平台| www.875907.com-体彩走势图综合版| www.984386.com-亚博彩票app下载| www.bx52.com-体彩排列三规则| www.vl45.com-彩票开奖信息查询| www.176300.com-安徽福彩快3走势图|