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天

知道了
1分快三 www.78732.com-福彩3d计划专家| www.229024.com-彩票站吃票有人管吗| www.190647.com-彩票知识大全| www.354119.com-美国彩票史上最大奖| www.562470.com-彩票行家com图库| www.681526.com-辽宁福彩中心地址| www.878957.cc-49彩票网址手机版| www.338447.com-快三投注计算表格| www.158.tv-中3亿彩票集体辞职| www.ks59.com-快三守号翻倍公式| www.198468.com-今天快三推荐豹子号| www.290768.com-彩票计划软件破解版| www.58ss.cc-体育彩票是虚假的吗| www.lj31.com-中彩啦官网-| www.38.me-彩票站什么时候放假| www.23491.com-祥云瑞彩什么意思| www.15318.cc-风雨彩虹寓意| www.072708.com-大乐彩注册-| www.317699.com-福彩电子走势| www.52927.com-好彩官方-| www.069233.com-亚彩会登陆最新消息| www.202305.com-贵州体彩7位数| www.346467.com-辽金红绿彩-| www.367103.com-日本彩票官网| www.155646.com-辉煌彩票网站| www.281758.com-e球彩2码聪明组合| www.006409.com-泰国好彩薄荷双爆珠| www.175126.com-正彩彩票-| www.878357.cc-体彩排列三怎么玩法| www.279591.com-腾讯时时彩是官网吗| www.491862.com-中国彩吧3d走势图| www.568741.com-双色彩票走势图表| www.w88.date-大连体彩网点查询| www.376.website帝皇彩票网站| www.069646.com-中国福彩网上购买| www.16og.com-旺彩双色球开奖下载| www.83313.com-彩票计划免费app| www.051873.com-彩票合买团-| www.330497.com-广西彩票快三app| www.6890.in-好彩一八是什么数字| www.422262.com-口袋彩店和口袋号店| www.347315.com-乐彩网彩票| www.875638.com-牛蛙彩开奖现场| www.954706.com-快三预警软件| www.822574.com-排三牛彩网开机号| www.561995.com-彩票滚球什么意思| www.695981.com-尚轩彩票平台| www.791229.com-今天福彩开什么奖| www.ou76.com-新快三单机游| www.44kn.com-彩票33报警-| www.963.live-福彩真的有人中奖吗| www.7335.me-下载浙江体彩6加1| www.25974.com-彩虹的七色-| www.71650.com-银海彩票工作室3d| www.42542.com-搜狗彩票官网| www.66151.com-青海福彩3d开奖| www.727212.com-五福彩票网址| www.795723.com-实体竞彩店现实| www.6516.com-怎么样开彩票店| www.301014.com-免费送彩金38| www.515360.com-怎样购买七星彩票| www.609272.com-七星彩19079期| www.682499.com-足彩购彩软件| www.762207.com-奇门遁甲测彩票| www.831069.com-黄鹤楼28的迷彩烟| www.890640.com-玩彩票输得倾家荡产| www.954037.com-uu快三大发快三| www.vn02.com-博彩返水高的| www.4131.biz-三重彩虹-| www.0931.org-500彩票合买| www.7212.pw-福利彩票扣税| www.38223.cc-禁止网络售彩通知| www.53873.com-彩500怎么玩| www.750348.com-七星彩内部9组直码| www.832265.com-彩吧助手3地走势图| www.899487.com-彩81专属app| www.964781.com-刷分分彩技巧| 大赢家彩票www.599424.com| www.796674.com-彩票平台输钱怎么办| www.901589.com-最新福彩开奖结果| www.966619.com-京东彩票客服电话| 乐彩网www.lcw199.com| www.ov61.com-中国福彩19033| www.3id.com-京彩彩票违法| www.6787.me-网易彩票最新黄历| www.19233.cc-福彩彩票扫码| www.ua69.com-彩票推广术语大全| www.su41.com-时时彩止盈止损经验| www.507991.com-网上兼职彩票| www.361655.com-彩票测试账户| www.533728.com-七星彩百度百科| www.678965.com-售彩app彩-| www.827458.com-最新足球竞彩结果| www.960407.com-风之彩彩票首页| www.cg90.com-分分快三能赢吗| www.415004.com-彩盈线下娱乐| www.270723.com-欧盟好彩柠檬爆珠| www.5797.biz-体彩小军-| www.925760.com-l9cfcc彩富网| www.g07.net-彩票工具箱-| www.93rf.com-一寸彩色近照| www.503527.com-福建省福彩发行中心| www.567722.com-彩66app下载| www.337863.com-福彩今晚3d得出啥| www.167299.com-安徽福利彩票快三| www.385090.com-购彩票软件-| www.5163.org-韩国快三是怎么回事| www.37237.com-福彩3d计划软件| www.l10.org-大发云旗下彩票平台| 新盈彩www.xinyc3.com| www.475643.com-汇腾盈彩彩票| www.144382.com-51计划网时时彩| www.49225.com-浙江爱乐彩11选五| www.662505.com-国彩gc-| www.778489.com-彩乐网app-| www.858550.com-彩神计划软件安卓版| www.925442.com-天齐网体彩双胆预测| www.979217.com-湖北快三多少钱| www.cc35.cc-福彩排列五开奖| www.26wt.com-体育彩票怎样加盟| www.590816.com-徐州彩票中奖名单| www.654355.com-叫彩之源的app| www.858645.com-福彩投资三天计划| www.907603.com-嘉定机选中奖彩民| www.965546.com-彩票店是怎么赚钱的| 博友彩www.451956.com| www.qp43.com-福彩内部数据骗局| CP701www.544aa.cc| www.953397.com-好彩双爆珠香烟味道| www.if13.com-手机中彩网下载版| www.ho41.com-腾讯分分彩玩法说明| www.200665.com-体彩481玩法规则| www.493556.com-彩票网站制作成本| www.879954.com-陕西省福利彩票开奖| www.952308.com-中彩啦是真的吗| www.997221.com-彩票大厅app| www.cr93.com-那些彩票平台好| www.2726.pw-轩彩娱乐登录地址| www.9425.top-华人官方登陆时时彩| www.813338.com-福利彩票中刮到金条| www.921850.com-河南结婚彩礼| www.981239.com-凤凰彩票网址| www.ak45.com-7星彩专家预测号码| www.0260.xyz-关于彩票店转让官司| www.301825.com-贵州快三走势结果图| www.540047.com-休闲快三表演| www.605116.com-彩票中奖短信| www.664880.com-彩民之家提供香港| www.7248.xyz-彩虹六号无人机dr| www.7225.cm-彩虹六标准版多少钱| www.13410.com-必发指数新浪爱彩| www.57763.cc-福利彩票线上购买| www.002013.com-南方众彩网3d预测| www.4428.me-福彩图库总汇| www.858145.com-福彩整顿了吗| www.298631.com-体彩排列3杀号定胆| 凤凰彩票www.88266z.com| www.353772.com-彩票和我股票风险大| www.445245.com-德惠彩票销售| www.528322.com-怎么破时时彩的规律| www.654629.com-福彩中奖到哪里兑奖| www.076274.com-法国彩票-| www.296243.com-吉林快三计划书| www.410171.com-足彩老盘-|