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.lq49.com-中彩票新闻是真的吗| www.672980.com-发财网彩票网址| www.867015.com-v9彩票app下载| 500彩票www.549677.com| www.r18.pink-万禧彩票-| www.292135.com-哪些高频彩是正规的| www.710526.com-彩票套彩金怎么套| www.953053.com-1700九州彩票| www.144382.com-51计划网时时彩| www.317208.com-足彩任九19039| www.578041.com-彩票微信飞单| www.9611.online酷彩网能提现吗| www.79751.com-宁夏体彩中心官网| www.390061.com-买彩票亏了钱怎么办| www.ut39.com-90彩票大厅-| www.984360.com-彩8com-| www.04441.com-能买足彩的软件| www.922995.com-急转体彩店-| www.217300.com-彩票指南报-| www.06066.com-彩票杀号器-| www.24hp.com-贴彩色钢化膜教程| www.969703.com-追号的彩票-| www.bm5.cc-彩票app大集合| www.uo19.com-合肥福彩快3走势图| www.4491.me-彩票站投资-| www.06124.com-体彩竞彩销售实体店| www.82682.cc-胜负彩19025| www.056667.com-七星彩大奖梦册| www.223865.com-竞彩网-| www.309038.com-彩票平台大全| www.260718.com-北京快三开奖号多少| www.863031.com-足彩19051推荐| www.598329.com-体彩19065期| www.963495.com-买足球彩票的软件| www.801054.com-谁在皇都彩票赢钱过| www.386736.com-体彩预测大师| www.534849.com-电玩彩票机技巧| www.956054.com-快三遇上长龙怎么办| www.iy.cc-下载北京彩票快3| www.np52.com-彩票模拟器开奖| www.966526.com-01彩票怎么样| www.875977.com-香港5分彩官方网| www.980440.com-火箭彩票网是哪里的| www.dl88.cc-代人玩快三是骗局吗| www.e01.net-足彩8串1错二场| www.76sl.com-3d福彩票开奖号码| www.629925.com-网易足球彩票预测| www.or92.com-江苏快三统计图表| www.74344.com-竞彩网站源码| www.85521.cc-愛博彩票-| www.106503.com-掌上彩票pro官网| www.25408.com-合肥市体彩兑奖地址| www.32356.cc-蜂巢团队高盛彩票| www.983722.com-好运彩票-| www.l31.com-大发彩彩票注册| www.594059.com-机选一注体育彩票| www.750368.com-933彩票网页| www.883052.com-快三豹子通一注多钱| www.958916.com-600w彩票app| www.bj73.com-分分彩平台-| www.717.in-网络彩票推广犯法不| www.gp63.com-喜乐彩第二位走势图| www.039785.com-华彩赢家靠谱吗| www.82561.com-彩票排五走势图| www.37555.cc-快3彩乐乐推荐| www.880981.com-广西体彩兑奖限额| www.222858.cc-微信里怎么买彩票| www.869666.cc-鸿运彩票网是正规| www.95hs.com-彩友多进不了| www.238670.com-七天彩票网在线官网| www.350342.com-湖北体彩中心在哪里| www.529892.com-東方彩-| www.675872.com-竞彩篮球胜分差技巧| www.771116.com-一分钟时时彩图片| www.867666.cc-彩票app制作教程| www.948023.com-福彩3d生肖幸运号| 500彩票www.701514.com| www.66001.cc-黄鹤楼迷彩烟| www.7en.com-彩票怎么才知道中奖| www.78ko.com-国外专业足彩| www.8298.vip-全国福利彩票销售额| www.369808.com-256c彩票-| www.1941.in-双彩体彩三句话| www.350313.com-彩票五行怎么算| www.8908.cm-足彩6x22多少钱| www.5124.cm-体彩最新-| www.0355.com-时时彩跨度走势图| www.y37.cc-vr彩票老是输| www.77lg.com-乐彩网摘图谜总汇| www.1311.cm-福彩3d守号坑人| www.7398.cm-色彩画图片大全简单| www.24253.cc-宝马彩票违法么| www.66548.cc-我买彩票中了一千万| www.79608.com-广西爱彩乐-| www.86600.cc-福彩3d和值跨度| www.cv65.com-500私彩平台| www.726965.com-彩名堂彩票软件下载| www.860354.com-5050彩票com| www.6830.com-够力七星彩解梦图| www.30966.cc-彩票3d大奖得主| www.83817.com-刮彩票的秘诀| www.862509.com-时的彩挂机软件| www.698565.com-湖北体彩网点征召| www.839844.com-体彩文化建设| www.923338.com-彩票门市关门了| www.992905.com-微信彩票赚钱跟计划| www.fa27.com-678彩票-| www.135380.com-广两快三开奖结果控| www.085507.com-彩神机器-| www.6259.shop-彩影手机版官网| www.688922.com-微信玩时时彩犯法吗| www.665497.com-福彩三d天中藏机图| www.9aj.cc-体彩数字是什么号码| www.176308.com-福彩快三外挂手机版| www.309389.com-韩国买彩票地点| www.622188.com-铝彩涂白色-| www.701189.com-胜负彩对阵表| www.777846.com-易购彩平台提现失败| www.852511.com-分分彩挂机是真是假| www.911108.com-快三计划团队| www.966149.com-髮彩-| 奔驰彩票www.29178e.com| www.cp07.com-有没有快三准确计划| www.qb03.com-广东500彩票网| www.s68.com-福利彩票九宫图| www.819962.com-七星彩爆发-| www.566112.com-pp彩票是真的假的| www.014210.com-七星彩图库图片| www.628511.com-91彩票新平台| www.703492.com-湖南福彩票网| www.785383.com-大乐彩票开奖查询| www.844498.com-福彩大奖组-| www.089249.com-大发快三如何压大小| www.105149.com-手机在线购彩安全吗| www.216280.com-生肖彩票玩法| www.07fs.com-福彩怎么算毒胆| www.72xi.com-大中华彩票很黑吗| www.697662.com-彩票几号开售| www.760054.com-生肖彩票黄历今天| www.537685.com-颜料七彩色-| www.621381.com-彩神说预测-| www.686516.com-澳彩半一盘分析技巧| www.765544.com-百盈时时彩-| www.834493.com-3d彩票图纸今天| www.894338.com-685彩票-| www.951924.com-台湾5分时时彩| 818合彩www.www.9889hc.com| www.dl89.com-体育彩票500| www.xq82.com-也买彩网站正规吗| www.70co.com-彩票机会打法| www.2425.in-中中彩之家-| www.20qf.com-县城体彩刮奖| www.181714.com-105彩票app-| www.555981.com-国乐彩怎么样| www.752163.com-彩什么意思-| www.92669.cc-立彩首页app| www.031625.com-彩票开奖漏洞破解| www.206135.com-五分彩被骗5000| www.282913.com-五鬼运财符买彩票| www.714102.com-彩票购买大奖网| www.853349.com-彩票之家资枓大全| www.972233.com-彩票api接口地址| www.ew42.com-彩票18075-| www.126347.com-8号彩票软件|