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天

知道了
58福彩 www.025753.com-优乐彩手机开奖| www.6559.biz-彩66官方下载安装| www.501438.com-合乐888彩票总部| www.492555.com-唐山龙北彩票站黑彩| www.601025.com-什么彩票可以多期| www.17179.cc-外围买彩票犯法吗| www.322299.com-137彩票平台下载| www.525379.com-时时彩高频计划网| www.678038.com-易彩代理-| www.790499.com-彩票要邀请码| www.873971.com-山西福彩网双色球| www.952351.com-购彩平台代理违法吗| 福利彩票www.135842.com| www.230155.com-旧版彩票共享大全| www.328007.com-银川体彩地址| www.421212.com-山东彩票软件下载| www.874494.com-彩票公众号老刘说彩| www.101835.com-一定牛彩票停售原因| www.234278.com-福彩网络投注中心| www.367977.com-七彩星小说| www.505273.com-竞赢彩票是什么| www.657173.com-360官方彩票安卓| www.817623.com-幸运时时彩计划图| www.948993.com-gc国彩彩票站| www.797558.com-彩99老版-| www.893377.com-彩票在线工具倍投| www.995707.com-足球彩票十四场| www.jv04.com-彩库宝典图库版| www.066581.com-海南七星彩玩法介绍| www.6av.cc-下载132分分彩| www.778552.com-大乐透浙江风彩网| www.896268.com-足彩怎么看盘| www.072300.com-秒速时时彩计划群| www.20kv.com-新浪体彩排列三玩法| www.721844.com-什么软件可以买快三| www.369703.com-福利彩票入门教程| www.535064.com-一分钟时时彩怎么玩| www.681022.com-台湾彩券539| www.778945.com-3d银海彩报-| www.126134.com-手机万豪彩票合法吗| www.dp89.com-吉林快三遗漏号| www.0569.vip-彩报二版-| www.247919.com-江苏快三是不是有假| www.858432.com-乐购彩票计划| www.920038.com-福彩12生肖开奖| www.978680.com-天天福彩免费资料| www.cp5211.com-贵州省快三开奖信息| www.109378.com-金利彩票网站| www.218107.com-多玩娱乐快三| www.352695.com-雅彩彩票未派奖| www.554343.com-彩票3d术语-| www.652568.com-福彩大乐透开奖公告| www.756464.com-彩票打码员-| www.885805.com-三d彩报图库| www.981064.com-七彩杯官网-| www.cw43.com-彩票33可靠吗| www.yd30.com-韩国彩票在哪查询| www.59pc.com-易购彩可靠吗| www.211287.com-福州快三开奖结果| www.756608.com-76858彩票om| www.339466.com-11选5爱乐彩浙江| www.572284.com-江苏快三快彩乐| www.651645.com-优信彩票投注| www.761153.com-彩票牛牛玩法| www.868303.com-九亿彩票骗局| www.947665.com-彩票投注什么意思| www.cp811.com-快三有几个省开| www.966954.com-彩票app启动图| www.ro48.com-盈彩全天计划| www.60ix.com-福利彩票复式怎么算| www.98128.com-上海快三跨度开奖控| www.068315.com-华彩软件站下载| www.4908.com-688彩票邀请码| www.40925.com-立彩彩票助手| www.ce68.com-大发快三邀请码贴吧| www.wo42.cc-广西福彩3d-| www.0030.online八位数彩票怎么买| www.lp37.com-彩票12是怎么样的| www.260358.com-288彩票骗局| www.728858.com-大连大乐透中奖彩民| www.802166.com-彩谜天地联销图今天| www.170540.com-湖北快三开奖| www.610195.com-投诉彩票777网站| www.6691.cm-彩神vip软件| www.119363.com-彩神app登录平台| www.04dc.com-彩客网完全版| www.228353.com-南阳市彩礼钱| www.068198.com-辽宁福彩快乐12| www.134433.com-福福彩3d走势图| www.8181.bid-49彩票平台黑不黑| www.027.tv-时时彩去哪玩| www.6400.vip-足彩九场推荐| www.873037.com-大发彩票时时彩| www.978528.com-福彩3d银海图| www.04ub.com-吉林快三心得| www.20kj.com-买彩票不给钱怎么办| www.9348.ren-武汉没有福彩中心吗| www.pa3.cc-买彩票怎样选号码| www.691031.com-足彩北欧四狗| www.913904.com-天天中奖彩票靠谱不| 风之彩www.77fzc.com| www.598296.com-体肓彩排列5| www.409009.com-够力七星彩奖表新版| www.14vn.com-彩票重号-| www.425577.com-重庆时彩绝密技巧| www.903698.com-催祥云驾瑞彩福寿| www.kh84.com-中国福彩3d预测| www.216.cc-彩票投注站微信代购| www.06yg.com-简单彩铅樱花树画法| www.690216.com-新浪爱彩欧洲杯| www.766478.com-线上彩票代理加盟| www.87jv.com-福彩3d中奖率| www.8918.in-彩乐乐网娱-| www.995808.com-盈彩彩票可信吗| www.128709.com-卓易彩票下载| www.262873.com-破解捷豹彩票系统| www.jc68.com-好彩网是合法的吗| www.ac86.com-大智慧福彩-| www.7348.tv-买彩票是骗人的吗| www.730478.com-老梁说彩票巨奖| www.763329.com-福利彩票十分钟玩法| www.840905.com-儿童彩妆怎么画| www.903816.com-网彩平台出租| www.959669.com-战狼彩票精准计划| www.999674.com-湖南福彩动物总动| www.ls1.cc-大发快三玩法心得| www.334320.com-上海快三推荐号码| www.259900.com-京东彩票入口| www.350912.com-安徽体彩排三技巧| www.440120.com-镇江市体彩中心| www.007709.com-全民彩票官方版| www.967973.com-快三长龙提醒app| www.544414.com-易彩娱乐不给提现| www.953240.com-我要中彩网-| www.az48.com-体彩排列五中奖号码| www.f62.club-101彩票论坛| www.022723.com-买彩票去哪买| www.756211.com-八福彩票-| www.5072.vip-长沙体彩大厦| www.186819.com-时时彩开奖结果表| www.313615.com-福彩快三预测| www.254157.com-808彩票版-| www.332017.com-福彩快乐十分规则| www.076969.com-玩快三正规网站| www.171002.com-彩票开奖结果i| www.316114.com-上海福利彩票加盟| www.27499.com-重庆快乐十分爱彩乐| www.558543.com-彩客论坛-| www.94lm.com-3d和值网易彩票| www.208598.com-彩票助手手机版| www.259937.com-福彩大厅-| www.893212.com-超级彩票助手官网| www.025854.com-时时彩代理招商平台| www.995880.com-足彩18086大势| www.823908.com-山东彩民中奖五亿| www.5638.com-彩票qq群骗局| www.339845.com-山西福彩双色球首页| www.006645.com-体育彩票三等奖奖金| www.261701.com-赠送彩金qq群| www.513755.com-什么彩票5分钟开奖| www.682851.com-彩票自助终端机骗局| www.779511.com-彩票双色球走势表| www.882261.com-足球竞彩34彩票| www.562.cm-易彩彩民福地登录|