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.313.host-彩票字迷汇总大全| www.128057.com-雨后彩虹头像| www.ny49.com-安徽省福彩快3| www.314813.com-七彩-| www.944565.com-百万彩票是真的吗| www.126957.com-古风风景简笔画彩铅| www.850797.com-梦见去彩票店| www.540547.com-彩神争8苹果| www.658345.com-87彩店官网网址| www.744473.com-彩票234-| www.822512.com-福彩群英会倾家荡产| www.895035.com-时时彩助手下载手机| www.983488.com-彩票777www| www.li4.com-买彩票怎么买| www.89vf.com-亚洲博彩公司特点| www.388489.com-大发快三杀码定胆| www.1512.xyz-内蒙古的体彩中心| www.002987.com-体彩七星彩摇奖器| www.141755.com-福利彩票机选号好吗| www.255555.cc-体彩七星彩走势图| www.561522.com-十分江苏快三技巧| www.91853.cc-好彩一的开奖| www.577392.com-福彩3d包选几钱| www.44960.com-福彩35选7-| www.009438.com-132彩票是官网吗| www.101043.com-极速彩票官方网站| www.287610.com-现在买不了足球彩票| www.219628.com-好彩网图谜-| www.636213.com-福利彩票税收多少| www.212298.com-私彩平台哪个可靠| www.905603.com-竞彩混合过关计算器| www.it61.com-彩票怎么买的| www.cai3927.com内蒙快三专家预测| www.189241.com-内蒙古快三app| www.23117.cc-彩票纸大小-| www.502502.cc-刷彩票立返-| www.59952.cc-百彩仙子-| www.2772.in-凌天福彩试机号| www.29597.com-鸿运来彩票官网网址| www.002659.cc-海南七星彩预测软件| www.293266.com-易彩一彩民福地测速| www.962080.com-贵州省福彩快三| 500彩票www.602434.com| www.ld76.com-购彩竞彩-| www.041842.com-九彩彩票是正规的吗| www.730610.com-玩分分彩后二心得| www.885854.com-快三如何选好| www.980427.com-广西体彩电话投注| www.gd09.com-百胜快三-| www.8529.cn-全国360彩票| www.28639.com-彩票和股票哪个害人| www.96587.com-西安福彩兑奖中心| www.079797.com-福彩3d规律-| www.297001.com-彩票k线图走势分析| www.423623.com-广州快乐十分彩乐乐| www.898548.com-福利彩票往期中奖| www.272908.com-青海快三开奖结果查| www.868702.com-海南七星彩手机软件| www.273257.com-体彩的宗旨-| www.279339.com-福利彩票qq群| www.048247.com-500彩票是真的么| www.239866.com-快购彩票软件| www.eu51.com-北京5分彩官方数据| www.162757.com-江苏快三电脑版走势| www.172366.com-贵州快三走势图和值| www.266107.com-快购彩票安全吗| www.f81.biz-华人娱乐彩票安卓版| www.52788.com-好彩投988-| www.f00.top-七乐彩选号-| www.114260.com-大发彩票手机登录| www.238911.com-充100送28彩金| www.8pm.com-广东体彩官方网| www.65nu.com-国内专业的高频彩种| www.c95.club-五洲彩票官方网站| www.155010.com-足彩拉力理论解释| www.vk64.com-安徽福彩快三开奖源| www.126439.com-足球彩票手机app| www.67325.com-足彩让球玩法| www.3283.biz-彩票购买平台官网| www.9kq.cc-那些彩票是正规的| www.581067.com-开彩吧kc8hk| www.670821.com-彩色的中国资料| www.751069.com-彩8苹果版下载专区| www.821993.com-流产3d彩摘网| www.898172.com-足球彩票买不了| www.963402.com-小马3d彩乐乐| www.cai09.com-10分快三-| www.716546.com-彩铅风景画圆形| www.784765.com-七星彩奇偶走势网易| www.852178.com-足彩310报纸代码| www.906268.com-彩色的中国-| www.961625.com-哪个网站买彩票合法| 快彩在线www.2632q.com| www.778596.com-釉中彩釉上彩哪个好| www.671423.com-讽刺农村彩礼的说说| www.bl58.com-新利彩票软件| www.zn94.com-好彩客官网方下载| www.51cy.com-种彩网-| www.116011.com-极速彩票75秒网站| www.38kk.com-彩铅颜色调色表图片| www.420010.com-卓易彩票为什么变啦| www.01576.com-七彩开奖结果直播| www.58936.cc-天空彩票与大同行| www.2ag.com-彩票真的能中奖么| www.47xr.com-彩民乐阳光探码图吧| www.722.pw-竞彩足球中奖查询| www.3851.in-dd彩票官方网站| www.f37.top-乐盈彩票怎么样| www.062922.com-快捷彩票网-| www.407490.com-易网彩票资讯| www.990768.com-如何做手机彩票代理| www.19oh.com-福彩3d今天开奖结| www.4519.org-七星彩历史开奖至今| www.bk27.com-038彩票官方版| www.198964.com-玩彩怎么玩-| www.482322.com-一般买彩票是几位数| www.575038.com-703彩票登陆| www.521391.com-有谁要玩腾讯分分彩| www.221564.com-瑞彩祥云可以开挂| www.95768.cc-福利彩票公益| www.43794.com-体彩任选三奖金| www.591168.com-上海彩礼和嫁妆| www.670502.com-彩经网新版排三| www.751857.com-1号网彩票-| www.qk3.com-吉林省体彩官网| www.nv10.com-公务员买彩票受处分| www.0ba.com-彩票7乐彩预测| www.61hn.com-7意彩app下载| www.0398.pw-正规购彩网站| www.005709.com-彩票360网走势图| www.384610.com-彩票买卖合同的性质| www.369645.com-动态澳彩竞技风| www.504899.com-体彩排五走势带连线| www.577503.com-七星彩今晚出什么号| www.650189.com-博彩游戏什么是| www.308142.com-福彩35-| www.453337.com-中国3d彩涂图迷| www.532410.com-方星彩-| www.591289.com-澳门彩票博彩公司| www.655685.com-爱彩乐大乐透助手| www.744427.com-兴华彩票兼职| www.807393.com-足彩2串1计算公式| www.904085.com-合一彩票-| www.957262.com-时时彩一个群都是拖| 黄金彩Ⅱwww.hjin2.com| www.5113.cn-江西彩民中奖| www.38853.com-993彩票软件| www.211719.com-全国彩票品种数量| www.566094.com-皇轩彩票官网| www.96880.cc-福彩中心主任案件| www.125643.com-中国福彩3d诗谜| www.fy56.com-8828彩票骗局| www.425581.com-生日彩票自动选号| www.12510.cc-105彩漂网-| www.44429.com-超兴彩票是骗人的吗| www.73327.cc-专业彩票网站| www.028824.com-彩神钱提现不了| www.128237.com-中体彩彩票-| www.223605.com-贵州福彩中心位置| www.9858.site-古建彩绘纹样大全图| www.97548.com-福彩几个号中奖| www.079616.com-老彩民彩票-| www.198469.com-彩神大发快3计划| www.301257.com-连红彩票app下载|