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.63dn.com-助赢江苏快三软件| www.417929.com-彩票双机店转让| www.053585.com-永盛彩票-| www.807355.com-拉人玩彩票骗局| www.923508.com-彩票庄家-| www.984774.com-快乐彩票骗人吗| www.qf1.cc-大乐购彩票是什么| www.46830.com-福彩3十o多少钱| www.023826.com-陕西福彩快乐十分钟| www.143698.com-青海福彩管理中心| www.004314.com-竞猜足彩吧-| www.720094.com-七星彩投注计算器| www.41uq.com-鸿运彩票能赚钱吗| www.63792.com-快乐彩任选五胆拖| www.229377.com-一定牛彩票下载安装| www.138806.com-鴻彩网-| www.80312.com-体彩排列五字谜汇总| www.7884.win-好运彩彩票下载安装| www.552805.com-彩名堂做假-| www.23336.cc-500轻聊彩票吗| www.eb89.com-福利彩票湖北快三| www.0095.date-体彩店网名-| www.590159.com-3d彩报蓝精灵| www.739869.com-澳门彩票公司如何| www.877569.com-彩票彩票开奖| 鸿运彩票www.hy2522.com| www.wr10.com-人人中彩票怎么样| www.78ka.cc-一分快三杀号定胆| www.3700.biz-幸福彩票苹果版| www.30021.cc-竞彩网的精彩团队| www.95649.com-公益彩555-| www.071922.com-盛兴彩票骗了多少人| www.919793.com-亚洲彩票十大平台| 爱彩www.003ac.com| www.896232.com-体彩天下软件| www.89nh.com-彩漂泡衣服时间太长| www.271975.com-广西快三分开奖| www.166736.com-福建快三预测| www.603297.com-彩6怎么登陆| www.748077.com-好彩1871哪里买| www.864439.com-太湖字谜汇总新彩网| 亚洲彩www.68568h.com| www.oj70.com-琓彩人杀一码| www.528445.com-韩国快三计划软件| www.716922.com-彩铅樱花落花风景画| www.816892.com-彩票周六开什么奖| www.454020.com-南京彩光祛斑医院| www.20326.com-重庆实时彩平台| www.970726.com-彩票没中奖安慰句子| www.gr27.com-江苏快三统计| www.44rj.com-分分彩网站源码| www.4ry.com-彩票中奖注数| www.1346.top-九龙国际彩票合法吗| www.311155.com-神圣彩票下载| www.383596.com-买一百块钱的彩票| www.563928.com-河北体彩竟彩网| www.1998.wang-慧金彩ios-| www.560244.com-吉林快三同号遗漏| www.599976.com-买彩票输了如何回本| www.478.bid-福彩3d手机论坛| www.69730.com-彩票vip聊天室| www.ip6.com-快三开内蒙快三开奖| www.4693.biz-梦到中彩票买了辆车| www.757009.com-工地彩钢围挡预算| www.060678.com-幸运彩彩票网站| www.200234.com-开彩网-| www.122539.com-乐彩ⅴip下载| www.678841.com-新春送彩金游戏平台| www.825111.com-体彩助手如何登录| www.918858.com-博彩公司哪个平台好| 500万彩票www.500cd.com| www.136525.com-27彩票-| www.719335.com-新彩吧官方免费下载| www.49009.com-2019,7星彩| www.037665.com-彩票数字组合器| www.cp5755.com-安徽省福利彩票中心| www.308849.com-彩计划高手福彩| www.372599.com-幸运五星彩开奖网址| www.2hg.cc-加盟体育彩票赚钱吗| www.760218.com-彩票手机端推广| www.879284.com-百盈快三规律破解| 尊彩www.900246.com| www.563080.com-中博系统的彩票平台| www.635402.com-维护彩票网站犯法吗| www.732755.com-u彩娱乐平台| www.794712.cc-周易与彩票选号下载| www.867750.com-七星彩都是几点开奖| www.187205.com-分分彩不要玩| www.809528.com-全彩助手下载| www.903371.com-九万彩票安卓版| www.973780.com-南京娱乐快三| 瑞彩网www.680358.com| www.824420.com-郑州市福彩中心地址| www.525594.com-二手彩票机多钱一台| www.283643.com-够力七星彩老版| www.786668.com-1分极速彩-| www.881004.com-博彩论app-| www.965404.com-百盈快三技巧顺口溜| www.nr8.com-甘肃福彩app| www.xg40.com-977彩票网站| www.27wx.com-玩大发彩票能赢钱吗| www.749.tv-50088彩票-| www.796894.com-体育竞彩赛事公告| www.893917.com-彩31彩票-| www.967471.com-好听的体彩店名字| 环球彩票www.880686.com| www.666358.com-体育彩票七星彩势图| www.436.tv-49彩票安卓手机版| www.16472.com-竞彩太黑了-| www.790125.com-彩票预测什么软件好| www.3964.org-东北结婚彩礼给谁| www.87sl.com-三度博彩论坛网址| www.6845.cn-彩吧第四版-| www.881388.com-双色球免费易彩预测| www.495282.com-彩漂粉主要成分| www.058824.com-彩99官网苹果下载| www.0411.space-k彩彩民福地aqq| www.035031.com-坤彩科技股票吧| www.95470.com-体育彩票中国足球| www.uu75.com-彩彩吧论坛首页| www.591838.com-977彩票计划| www.0889.win-福利彩票预测技巧| www.852888.com-河内五分彩开奖历史| www.963516.com-三d乐彩网首页| www.if56.com-韦彩会彩票-| www.d76.me-廉江好彩哥高手论坛| www.179888.cc-c168彩票网-| YY彩票www.yy63.com| www.429729.com-下载牛彩网官方| www.898222.cc-hk百彩网免费资料| www.cx52.com-私彩凤凰娱乐靠谱吗| www.306403.com-彩票咋样才能中奖| www.428889.com-大信彩票怎么样| www.542822.com-075彩票-| www.625708.com-购彩网提现不了| www.690953.com-总统彩票网投平台| www.762663.com-博王时时彩下载| www.818871.com-彩票筛选-| www.875294.com-新疆时彩-| www.967740.com-郎咸平说彩票| 众乐彩票www.389144.com| www.142300.com-彩8怎么下载| www.399508.com-彩47是官方网站吗| www.27dh.com-体育彩票在哪里好| www.0407.tv-足彩吧贴吧-| www.578.cm-分分彩怎么算万位数| www.280567.com-网易彩票可以买了吗| www.190390.com-快三2夸的号码| www.293382.com-江苏福彩app| www.42ye.cc-足彩分析预测足彩| www.07189.com-福利彩票怎么下载| www.2196.wang-体彩终端机提现指南| www.77777.com-福彩3d技巧中中中| www.077723.com-彩拍ios软件下载| www.365745.cc-足球竟彩网比分直播| www.970427.com-彩票赚佣金的方法| www.069340.com-今日福彩字谜解释| www.hs05.cc-新浪足彩胜负预测| www.f76.com-101亿彩票-| www.35ll.com-周三彩票开奖| www.58611.cc-电视彩票开奖| www.144236.com-北京快三怎么玩稳赚| www.228303.com-彩礼和嫁妆比例| www.365281.cc-信用卡透支玩快三|