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.168684.com-安徽快三开奖号| www.533750.com-福彩怎么算中奖金额| www.668117.com-安徽彩礼一般给多少| www.315139.com-竞彩篮球加时赛算吗| www.882427.com-体彩排列五走逝图| www.rl6.com-上海快三今天开奖结| www.3787.vip-彩先知谜语解特马| www.15713.cc-初学者简单的彩铅画| www.474192.com-彩票能相信吗| www.576778.com-彩票图片-| www.675102.com-万通彩票娱乐平台| www.785342.com-金巴黎彩票合法| www.903611.com-购彩通苹果系统| 68彩票www.68689d.com| www.xv5.com-内蒙快三最大遗漏号| www.784727.com-七星彩诲口彩票网| www.37lu.com-3d彩吧杀号-| www.2477.wang-果彩票网-| www.306218.com-彩虹六号围攻手机版| www.476636.com-福少时时彩官网| www.579229.com-牛彩藏机图3d| www.653408.cc-49彩票网集团| www.wz38.com-体彩图迷总汇| www.683451.com-5000彩票平台| www.801085.com-2018世界杯体彩| 万历彩票www.77114p.com| www.013655.com-七星彩值-| www.132755.com-世界杯足彩票| www.331138.com-三d彩神通关注码| www.490333.cc-威尼斯彩票游戏网站| www.592831.com-彩虹805-| www.682184.com-微信彩友团出票| www.266363.com-多票票彩-| www.165286.com-安徽体彩兑奖地址| www.37ta.com-七星彩是不是骗人的| www.776039.com-泊松足彩模型下载| www.205602.com-快三开奖结果网易| www.kw2.cc-甘肃快三88走势图| www.733982.com-西安体彩竞彩店| www.936042.com-乐山快三到底真假| 彩票58www.582993.com| www.xw71.com-江苏褔利彩双色球| www.1986.pro-智慧彩票ios| www.86258.cc-d8彩票app下载| 大赢家彩票www.602857.com| www.680423.com-彩拾彩票正规吗| www.98gs.com-名人彩票登陆网址| www.72553.cc-f8彩票app-| www.702640.com-快三杀码是什么意思| www.793088.com-盐城市福彩中心地址| www.872072.com-东涛体育彩票| www.983344.com-福彩外围赌博微信群| www.lo4.com-福彩河南快3开奖| www.30dg.com-昨天的体彩中奖号码| www.4516.cm-传统足彩怎么玩| www.t39.club-武汉福利彩票| www.64666.cc-竞彩001玩法| www.088164.com-足彩新浪彩票网| www.165505.com-7168网址彩票网| www.236975.com-e球彩开奖结果查询| www.327226.com-中国彩票开奖33期| www.59303.com-彩票机申请-| www.034953.com-彩68完整源码| www.268092.com-体彩网页版-| www.352112.com-体彩十一选五技巧| www.9978.cc-福彩3d坑-| www.52081.com-彩名堂app苹果版| www.953261.com-安徽快三查询| www.87852.com-彩票中怎么顺龙| www.062910.com-网上怎么买福彩3d| www.180728.com-爱彩乐江苏快三结果| www.354409.com-福利彩票中了3个亿| www.688682.com-105彩票正规吗| www.949216.com-优彩彩票app下载| www.cai3343.com江苏快三复式投注| www.yn11.com-68彩票平台官网| www.61vk.com-078彩票网站| www.0444.biz-159竞彩足球提现| www.719.xyz-彩票坐庄是什么意思| www.174211.com-山东体彩11选5| www.031378.com-体育彩票是否真实| www.0475.loan-吉安彩箱包装| www.8822.vip-分分彩大小八期计划| www.3848.cc-七星彩本期局王| www.26927.cc-七星彩中奖格| www.370119.com-跳快三锻炼身体吗| www.322853.com-国彩网注册-| www.460123.cc-体彩杀码预测| www.3670.org-购彩v注册链接| www.966243.com-体彩双色走势图| www.nm62.com-网上新快三骗局| www.613382.com-u9彩票平台靠谱吗| www.859822.com-彩票体育彩票大乐透| www.977759.com-怎么在网上买足彩| www.w27.club-福彩玩彩老头给胆| www.049024.com-怎样能看中国体彩报| www.263205.com-重庆时时彩开奖视频| www.263399.com-彩客网大小分数据| www.873930.com-重庆三分彩开奖结果| www.373011.com-322彩票-| www.494506.com-中国福利彩票的由来| www.572195.com-任我赢彩票智能投注| www.638126.com-足彩网点-| www.714765.com-彩神争霸大发快三群| www.784655.com-体彩七星彩去哪兑奖| www.970746.com-彩票历史开奖数据| www.21od.com-qq购彩-| www.689168.com-体彩手机投注平台| www.803320.com-qq群彩票报号| www.883021.com-内蒙古福彩大家乐| www.cai6855.com江西快三走势图| www.rw04.com-5分快3是福彩吗| www.277251.com-下载快三宝典| www.706117.com-发彩单只染膏| www.777784.com-中国彩吧网下载安装| www.904940.com-竞彩足球彩票开奖| www.967909.com-彩票开奖网址大全| www.cai1277.com福彩精彩十分走势图| www.dg02.com-306彩票app-| www.e61.net-宝乐彩下载-| www.052.cc-有谁听过同乐彩票吗| www.896575.com-派彩走势图免费版| www.jl2.cc-江苏福彩快三助手| www.xe86.com-快3彩票投注app| www.23qo.com-体彩大乐透在线直播| www.67663.cc-v8彩票平台坑人吗| www.152575.com-4scc彩票-| www.256375.com-我要中彩票app| www.399944.com-周三买什么彩票| www.962343.com-湖北快三今日分析| 乐彩赢www.0014t.com| www.713.bid-福彩开奖是直播吗| www.401336.com-uk彩官网-| www.535098.com-彩票游戏是赌博吗| www.688186.com-河南福利彩票公众号| www.810151.com-今日福彩出奖号码| www.2304.net-好彩三开奖情况| www.454369.com-快乐双彩游戏规则| www.144177.com-浙江快乐彩11| www.267292.com-体彩中心官网| www.040430.com-华夏竞彩app| www.545406.com-天天乐彩app下载| www.529939.com-时时彩振幅分析| www.52gt.com-水彩笔套装-| www.829.cm-直播刮彩票违法吗| www.380956.com-大咖荐彩下载| www.465737.com-5d彩超图片-| www.dl91.com-七星彩解梦册查码| www.96989.cc-古建彩绘天花图片| www.116969.com-福彩3d教父可信吗| www.220638.com-大奖彩票-| www.282860.com-三千万福彩-| www.370373.com-彩票网站平台出租| www.478874.com-彩通色卡官网| www.563864.com-龄期3d的彩图| www.632331.com-天下彩票幽默玄机| www.700213.com-福彩3d有几种玩法| www.598017.com-网络彩票可以买了吗| www.622831.com-福彩彩票站-| www.696540.com-必发指数新浪爱彩| www.765734.com-中博系统彩票平台| www.841640.com-七乐彩守号精选一注| www.900856.com-精英彩票6lcc| www.965049.com-彩七七下载安装|