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天

知道了
百盈PK10 www.296781.com-彩票类app排行| www.100407.com-乐彩客怎么下载不了| www.vx69.com-快三赢钱的小技巧| www.698405.com-彩票群倍投是真的吗| www.797661.com-lcz99购乐彩| www.907135.com-预测河北快三出奖| 500彩票www.50080n.com| www.89990.com-彩票假中奖生成| www.111169.com-快三坑人-| www.vh76.com-彩约365-| www.985697.com-福彩提成-| www.lw40.com-青海西快三查询| 幸运彩票www.669307.com| www.875026.com-三地彩吧图库寻码图| 大赢家彩票平台www.183572.com| www.jo75.com-蜂鸟团队彩票| www.4zn.com-体彩开奖地址| www.64lc.com-体彩刮刮大7彩票| www.5035.net-彩票明天-| www.464118.com-97彩票是骗局吗| www.647364.com-彩坛至尊免费料大全| www.781480.com-66官方彩票安卓版| www.870491.com-苹果彩16下载| 金凤凰彩票www.406577.com| www.42dc.com-彩虹球-| www.345409.com-易经选福彩-| www.487724.com-网络彩票有什么漏洞| www.577788.com-内蒙古快三新玩法| www.662246.com-实时彩平台哪个好| www.749109.com-彩虹e台节目表| www.833578.com-南粤36好彩3开奖| www.909198.com-湖北快三专家推荐号| www.988578.com-体彩站点怎么申请| www.ag70.com-6698彩票网-| www.xv03.com-买彩票后没给钱跑了| www.331161.com-河北福彩三d| www.td58.com-国彩网投合法吗| www.9989.online彩妆进货批发市场| www.579956.com-七星彩txt百度云| www.699570.com-辽宁福利彩票官网| www.794657.cc-福彩3d走势折线图| www.870011.com-福彩3d复式计算器| www.938123.com-中奖彩票号码| www.990430.com-505彩票直播网| www.ae10.com-彩票最新开奖| www.fw33.cc-福彩三分快三合法吗| www.99691.com-c27彩票app-| www.165012.com-顶尖彩票app| www.377400.com-彩票23期-| www.72193.com-25彩票首页-| www.318483.com-福彩排列3玩法介绍| www.627459.com-3d字谜双彩网| www.711005.com-app刷彩是什么| www.792285.com-附近彩票站点查询| www.875155.com-最新酷彩吧下载| www.960521.com-558赢彩安全吗| www.mf13.com-百度彩票网旺彩社区| www.x38.top-福建体彩官网app| www.66ob.com-数字3彩票开奖号码| www.240513.com-河北快三和值表| www.340669.com-乐彩网千禧3d独胆| www.446399.com-中彩网最准单双四肖| www.369590.com-足球彩票19017| www.708411.com-佰万彩票app下载| www.289055.com-福建福彩快3一定牛| www.244682.com-安徽快三官网投注| www.389876.com-郑州彩票店生意转让| www.517678.com-牛彩下载-| www.588624.com-彩票3d千禧试机号| www.690944.com-信彩彩票下载安装| www.103515.com-好彩1数据遗漏图| www.410523.com-七彩球游戏手机版| www.66441.cc-彩票中的三不同号| www.97en.com-含彩金彩票大全| www.03ra.com-彩铅唯美风景画教程| www.881394.com-博彩类app开发| www.326.website彩票狂人王成周近况| www.062313.com-彩16下载安装| www.025485.com-网络快三正规吗| www.91580.cc-炫彩微商官方网站| www.120216.com-澳门五分彩怎么样| www.137291.com-网上做兼职彩票| www.xo01.com-彩票35期预测| www.037985.com-金牛彩票官网| www.996.live-黄金分割率与彩票| www.18197.cc-足球计算器竞彩网| www.07wr.com-彩铅排线技巧| www.7899.cn-正规网络彩票网站| www.wn04.com-中彩娱乐网-| www.026785.com-试玩彩票赚佣金平台| www.287757.com-论坛博彩论坛| www.511239.com-雨后彩虹一类的网名| www.010878.com-幸运彩票真的能挣钱| www.430888.com-江苏彩礼一般多少钱| www.577353.com-体育彩票复试计算器| www.667664.com-阳光彩票官网登陆| www.731496.com-易彩集团注册邀请码| www.822626.com-福利彩票追加| www.ny22.com-彩票对比器-| www.360.cm-皇冠彩票投注可靠吗| www.9019.pw-澳门时时生肖彩| www.85309.com-彩大发快三破解器| www.176567.com-福彩快三出号规律| www.2850.vip-8o234好彩网站| www.723228.com-东彩娱乐登录| www.wy72.cc-中彩易软件app| www.573233.com-灯彩的种类-| www.701412.com-19042期足彩| www.575194.com-旺彩网预测-| www.843636.com-彩票监管案例| www.968251.com-彩票排列11011| www.gy14.com-彩16app下载| www.7268.net-彩虹6号无人机视频| www.97847.com-彩票网站返点最高| www.18wt.com-中国福利彩票双色开| www.198643.com-京彩app-| www.361508.com-滴滴彩票送28安卓| www.254977.com-时时彩龙虎预测软件| www.365755.com-彩铅脸部阴影怎么画| www.770991.com-一分彩彩票软件| www.851599.com-重庆时时彩模拟摇号| www.915036.com-淘宝买的彩票靠谱吗| www.972307.com-彩票开奖结果早知道| www.cai3939.com彩票屠龙是什么意思| www.428.cm-重生之彩票富翁| www.un99.com-杏彩手机客户端下载| www.05886.com-福彩3d预测方法| www.2355.me-好彩快三是怎么回事| www.758611.com-99彩票可以提现吗| www.984813.com-买黑彩彩民犯法么| www.028103.com-彩友多官网-| www.298078.com-兰州快三开奖推荐| www.752612.com-彩票2元网软件下载| www.962888.com-中彩娱乐应用下载| www.mr44.com-河北省体彩兑奖地址| www.7946.cn-彩墨是什么-| www.461424.com-玩彩票完死了| www.834632.com-炫彩3d拼图-| www.117201.com-中体彩官网电脑| www.390707.com-分分彩总和大小技巧| www.365189.cc-_红中彩票平台登录| www.782275.com-七乐彩票app下载| www.929695.com-七星彩1976期百| www.985557.com-唯彩看球app| www.yh1.com-乐彩网大发快三登录| www.40sa.com-卖海南七星彩犯法吗| www.659072.com-云南时时彩几点开始| www.d81.club-热门彩票大全| www.43se.com-六福彩是真的假的| www.95lj.com-星际彩票不能提现| www.307808.com-派彩走势图客服电话| www.221226.com-uu快三精准计划| www.127014.com-江苏南京快三查询| www.791447.com-彩票去哪里买| www.hs56.com-竞彩之家app| www.32oj.com-大连远洋竞彩视频| www.876642.com-中国彩吧助手| www.34tz.com-三d试机号彩神通| www.218866.cc-福彩快三最简单玩法| 博汇www.881805.com| www.279104.com-丹麦快乐彩计划软件| www.341600.cc-彩票店宣传画| www.416062.com-福彩彩票站内景| www.ir69.com-足彩串球规则|