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.144404.com-好彩堂跑狗图彩报| www.696.top-购彩ill真假| www.452245.com-太原体彩5800万| www.635720.com-彩75是不是骗人的| www.760651.com-秒秒彩漏洞稳赚技巧| www.859622.com-福彩开奖东方6十1| www.949281.com-体彩排列三中奖查询| 8号彩票www.60108o.com| www.297265.com-购彩助手-| www.377390.com-彩票咋买-| www.487748.com-彩票一定牛软件下载| www.571671.com-菲律宾快三开奖结果| www.674106.com-财政部彩票二十分钟| www.792038.com-福彩编号是什么| www.905608.com-快三如何倍投不赔| 双彩网www.178012.com| www.652537.com-福彩p62开奖号码| www.742411.com-彩票86app-| www.848553.com-如何看时时彩走势图| www.939981.com-找快吉林快三| www.994258.com-足彩欧亚指数| www.bx62.com-派彩网下载-| www.67116.cc-福利彩票中奖地区| www.477920.com-综艺福彩合法吗| www.lk67.com-1号平台彩票网址| www.00yi.com-福利彩票儿等奖| www.886553.com-大大彩票app| www.964990.com-快三诈骗-| www.da2.com-老时时彩360| www.98760.com-360彩票竞彩足球| 幸运彩票www.675266.com| www.324915.com-彩票统计器软件大全| www.250508.com-彩票全能中彩可靠吗| www.857292.com-彩之源怎么进去| www.613.net-福彩双色球投注技巧| www.148054.com-彩票助手追号计算器| www.js92.cc-快三导师是干什么的| www.628652.com-吉安彩票管理中心| www.982412.com-鸿辰国际超级福彩| www.we21.com-兰州市福利彩票中心| www.2886.biz-彩票导刊彩票与生活| www.39939.com-五分⑥和彩开奖| www.708177.com-百万彩票app网址| www.497949.com-五分彩投注技巧| www.622548.com-乐透型彩票开奖结果| www.776436.com-时时彩票怎么玩才赚| www.905679.com-看东西有彩色光环| 中国彩票网www.zg16.com| www.44148.cc-58福彩靠谱吗| www.046907.com-黑龙江快三助手| www.9090.pw-七乐彩按顺序出球| www.756115.com-御彩轩害死了多少人| www.603020.com-福利彩图片-| www.126025.com-福彩手机报下载| www.7335.com-大赢家时时彩合法么| www.69315.cc-竞彩网任九开奖| www.395238.com-3位数彩票开奖查询| www.740247.com-百乐彩官网-| www.903075.com-知彩平台-| www.883879.com-数字彩票双色球| www.cp9819.com-内蒙古福彩快3开奖| www.088104.com-699彩票苹果| www.7766.red-彩九苹果下载安装| www.798813.com-广东十分彩技巧大全| www.925760.com-l9cfcc彩富网| www.cai1900.com河北快三形态走势图| www.0108.tv-响亮的竞彩名字| www.008063.com-甘肃福彩快3直播| www.308807.com-彩票计划gcbcc| www.4617.vip-中彩票要告诉父母吗| www.787832.com-体彩500网-| www.903281.com-幸福彩票是什么| 500彩票www.51515o.com| www.uw82.com-q彩网怎么下载| www.51rw.com-彩票大赢家足球比分| www.659574.com-新彩网6-| www.218221.com-公益福彩是违法的吗| www.0348.vip-彩经网走势图带震幅| www.35331.cc-哪里有江苏快三群| www.993391.com-新手怎么看足彩| www.fw71.com-彩神uv平板打印机| www.665989.com-手机体育彩票网站| www.823736.com-卖彩票挣钱吗| www.963341.com-彩票代购交易| www.so57.com-时时彩五星和值大小| www.913351.com-福彩808-| www.975296.com-百度福彩双色球预测| 大赢家彩票平台www.976731.com| www.201.pw-儿童彩铅画花朵| www.901669.com-体彩试机号30| www.967255.com-彩票讨论群-| JJ彩票www.420611.com| www.948919.com-3d福利彩票查洵| 688彩票www.688dl.com| www.bx65.com-派彩免费版-| www.sf64.com-时时彩助手3| www.zb70.com-青海快三结果| www.38qp.cc-山东体彩三亿| www.1199.cc-799彩票下载安装| www.001830.com-七星彩可以买复试吗| www.172276.com-江西多乐彩开奖直播| www.828533.com-英国彩票巨奖| www.142753.com-奥客手机彩票| www.830245.com-哪里可以买彩票网| www.138647.com-山西体彩网上购买| www.943793.com-惠民彩票能提现吗| www.988547.com-幸运中彩票版本| www.ab51.com-上海快三三同号推测| www.393341.com-福彩三胆图-| www.019745.com-彩人帮专家专栏| www.405512.com-人工彩虹的物理原理| www.732159.com-南阳彩礼多少钱| www.897843.com-合买彩票宣传语| 彩61www.649638.com| www.617422.com-买彩票容易中奖的人| www.6678.pw-彩神请码-| www.964629.com-凤凰快三登录网址| www.ag00.cc-大奖网彩票-| www.654224.com-七星彩字图片大全| www.9226.biz-够力彩票奖表| www.229892.com-百盈快三的玩法| www.607126.com-彩票历史上最大的奖| www.686025.com-福利彩票真实可靠么| www.786188.com-凤凰娱乐购彩安全吗| www.884415.com-福彩三d五行走势图| www.965391.com-体彩精彩十分走势图| www.cc19.cc-吉林快三盘在哪买| www.70hb.com-旺彩预测微信号| www.2189.org-福利彩票贴吧论坛| www.8382.biz-网投时时彩网站| www.31445.com-老梁说彩票巨奖| www.83946.com-七呈彩开将结果直播| www.85jl.com-好运彩开奖结果| www.370875.com-竞猜足彩开奖结果| www.088563.com-乐途彩票网app| www.224422.com-彩票站快三合法吗| www.832952.com-网易彩票网怎么注册| www.951199.com-本期足彩对阵表| www.567421.com-苏宁彩票店上班| www.681434.com-重庆实时彩分析软件| www.775524.com-743cc天天好彩| www.884482.com-福彩3d3期计划| www.964010.com-彩虹的颜色是哪七种| www.bg77.com-彩票计划是不是骗局| www.106828.com-破解彩票系统| www.88lk.com-甘肃快三彩票走势图| www.3115.xyz-杭州福彩店-| www.8967.biz-程远杀双色球众彩网| www.898943.com-亚太彩票api接口| www.502315.com-玩彩票输了2000| www.508835.com-爱玩彩应用-| www.270768.com-福彩彩票计划软件| www.569552.com-天下好彩-| www.688202.com-神兽竞彩团队| www.786693.com-网络兼职牛彩| www.866783.com-河北福利快三| www.952684.com-彩票追冷-| www.997778.com-体彩篮球竞猜网| www.tc.com-彩票新规-| www.on55.com-七乐彩7个号多少钱| www.6tm.cc-彩票促销活动| www.509136.com-北京快三营业时间| www.656963.com-福彩3d截止时间| www.760033.com-555c彩票-|