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天

知道了
亚洲28 www.4634.com-彩票所有号码多少钱| www.019810.com-福彩作假视频| www.963118.com-江苏福利彩票官网| www.768611.com-彩票指南报网址| www.903456.com-万豪彩票助手老版本| 乐彩网www.60ksw.com| www.ob70.com-百盈快三和值怎么才| www.19dn.com-5亿彩是什么意思| www.122022.com-6188彩票骗局| www.830876.com-元角分的彩票平台| www.983040.com-888盈盈彩平台| www.wk55.com-分分快三怎么看| www.59hh.com-朱朱玩竞彩-| www.197051.com-彩经网排列3免费| www.183397.com-体彩网官方网站| www.483878.com-彩票5软件靠谱吗| www.078.bid-手机足彩分析软件| www.333896.com-福彩领奖-| www.3219.win-藤井有彩48小时| www.203971.com-上海基诺彩票玩法| www.779966.com-福彩3d教学-| www.318201.com-彩博888网-| www.431315.com-同城彩票是正规的吗| www.544425.com-易彩网怎么找不到了| www.665645.com-正德体彩app| www.770219.com-好彩网好赚钱吗| www.853798.com-分分彩倍投计划表| www.927118.com-多乐彩走势图| www.980327.com-558彩票app下| www.ge57.com-韩国彩券开奖官网| www.38.me-彩票站什么时候放假| www.969534.com-体彩排列三结果| www.zz0.com-河南福彩快三走试图| www.7089.net-武康七彩假日宾馆| 500彩票www.66653o.com| www.ns13.com-福彩2019027| www.839666.cc-彩色耐磨地坪施工| www.83893.com-福利彩票七彩乐中奖| www.14yh.com-七星彩图片168| www.380660.com-超级大乐透彩票查询| www.918285.com-幸运飞艇是假彩票| www.do04.com-快彩在线快3| www.608086.com-有飞鱼体彩么| www.556676.com-网上七乐彩票下载| www.655696.com-彩票单式生成| www.803866.com-竞彩彩票合不合法| www.878793.com-竞彩最稳的买法稳赚| www.970246.com-体育彩票信息| www.dw2.cc-重庆时时彩最新规定| www.wr11.com-快三福彩到底是什么| www.426720.com-烟台福彩中奖规则| www.957742.com-福彩快三速查表图片| 博友彩www.455518.com| www.984347.com-小彩牛一用户登录| www.b42.cn-江西省福彩发行中心| www.x16.org-福建体育彩开奖号码| www.76cj.com-中国电脑体肓彩票| www.0779.cc-亿彩彩票手机客户端| www.qg19.com-八亿彩平台-| www.323978.com-唯彩会-| www.44xa.com-贵州好彩香烟价格| www.911.hk-念什么咒语能中彩票| www.6009.pw-福彩消消乐中25万| www.019287.com-东涛体育彩票| www.361779.com-中国彩吧下载桌面| www.662326.com-易彩网是做什么的| www.772264.com-荣鼎彩有谁黑过| www.kg79.com-奇迹快彩网是真的吗| www.039918.com-深圳快三开奖查询| www.323995.com-彩票开奖查排列五| www.441917.com-体彩退押金真慢| www.576614.com-御彩轩时时计划| www.684569.com-高频彩投注策略| www.876856.com-海南4十1彩票网站| www.l43.net-噢客网足彩比分直播| www.172153.com-彩迷网开奖-| www.344515.com-如何代理彩票app| www.432001.com-彩66彩票登录网站| www.532707.com-彩票平衡定律| www.322203.com-彩z网-| www.20893.com-竞彩足球专家单场| www.75828.cc-七星彩大彩网走势| www.34yr.com-时时中彩票客服| www.1182.pw-大富彩票网靠谱吗| www.27482.com-竞彩霸主双色球预测| www.3328.vip-彩色装饰画素材| www.383711.com-竞彩对冲盈利| www.35qw.com-澳门哪里可以买彩票| www.0356.cc-玩彩app下载| www.5768.biz-快三模拟开奖号| www.134259.com-绿好彩-| www.zz67.com-900万彩票软件| www.ia07.com-68彩票客户端| www.963453.com-七乐彩3l期-| www.90uj.com-福彩3d胆码王软件| www.639715.com-天天幸运中彩票| www.cai7544.com长春快三开奖全部| www.42oa.com-北京时时彩计划走势| 5号彩www.565hc.com| www.696077.com-竞彩十四场开奖| www.gh93.com-广西快三开奖号| www.610553.com-河北体彩快三玩法| www.78fd.com-私彩幕后控制| www.1yu.cc-彩膜厂-| www.375098.com-时时彩规律和技巧| www.506930.com-福彩近期开奖奖号| www.355529.com-常州福彩点-| www.845820.com-深圳福彩案-| www.808224.com-彩票开奖查询飞鱼| www.16664.cc-福利彩票快三改时间| www.68244.com-四川福彩网快乐12| www.33lu.com-体彩购买时间到几点| www.91kc.com-快三在线投注网站| www.45692.com-必发彩票app| www.887036.com-360彩票是否合法| www.870913.com-双色球彩票app| www.572693.com-东盛彩报1版| www.0525.org-78.cn彩票-| www.661005.com-7意彩骗术-| www.827323.com-五分彩是什么意思| www.914024.com-168娱乐彩票| www.314593.com-七彩网络查成绩入口| www.517965.com-360彩票圈子晒票| www.8561.loan-彩票两元网大乐透| www.914912.com-怎么举报黑彩平台| www.94xc.com-怎么买中国足球彩票| 500彩票www.50051d.com| www.449114.com-华夏五分彩-| www.073.tv-大发时时彩彩票机| www.85572.cc-彩票坊是正规平台吗| www.100326.com-3d合值振幅彩宝贝| www.783119.com-新星彩宝-| www.847767.com-古建筑彩绘-| www.906860.com-合肥彩票中心在哪里| www.533443.com-福彩3d选胆图| www.595485.com-鑫亿彩合法吗| www.06444.com-新浪网彩票开奖直播| www.875800.com-湖北福彩网公告栏| www.947211.com-中国体育彩票高频| 500彩票www.26299n.com| www.gr26.com-好彩1开奖结果查询| www.xy16.com-d9彩票官方网站| www.16gm.com-k彩app-| www.85te.com-足彩基础知识入门| www.155049.com-今日竞猜足彩推荐| www.dk16.com-中原彩票是真的吗| www.tz61.com-彩票用语-| www.926990.com-江苏快三结果预测| www.995708.com-足彩冷门买法| www.be79.com-买彩票的都醒醒吧| www.rb99.com-大发时时彩开奖历史| www.33261.com-中福彩大奖哪里领奖| www.171959.com-5d彩票规则-| www.69400.com-乐彩网靠谱-| www.322751.com-全民彩票安卓| www.827763.com-彩票投注站有假的吗| www.892871.com-金博彩票网站| www.953323.com-彩神ix5分快3| 大赢家彩票www.620316.com| www.945036.com-17500彩票论| www.463448.com-彩部首是什么| www.541350.com-体彩暂停销售| www.590708.com-時時彩走势图带连线| www.645150.com-教你玩快三的人|