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.344600.cc-聚福彩票app| www.51055.cc-百盈快三软件| www.057079.com-休闲帝彩票-| www.321421.com-足球彩票即时比分| www.553038.com-什么人买彩票能中奖| www.663864.com-怎么查询福彩站点| www.751662.com-世界杯足彩销售额| www.878000.com-彩票往期中奖号码| 中国福利彩票www.6364r.com| www.296287.com-快三投注软件下载| www.447274.com-体彩单双大小走势图| www.84937.com-福彩3d太湖玄机图| www.98763.cc-河南周口彩礼多少| www.208565.com-彩票招商术语大全| www.586329.com-4个grand彩金| www.686706.com-中彩那天板书设计| www.777977.cc-汇彩邀请码-| www.848502.com-香港时时彩计划网| www.906397.com-彩票三分快三| www.968430.com-三分时时彩开| www.jj29.com-大发快三是真的吗| www.pq67.com-中国彩吧首页牛彩| www.52312.cc-常州彩票店转让| www.gw07.com-彩16苹果下载地址| www.137777.com-快三有多少组号码| www.5240.win-体彩彩票骗人| www.747654.com-天津华夏快三预测| www.884687.com-上海体彩网快三| www.970102.com-彩票网投领导者| www.ck.com-彩票选号器-| www.038851.com-福利爱彩票开奖| www.22bl.com-东北彩票大王视频| www.4962.biz-刮刮乐中奖彩票图片| www.330763.com-大发快三如何猜下期| www.188324.com-快三之家破解器| www.308367.com-足彩结果-| www.427371.com-福彩3d今晚开什么| www.526855.com-时时彩组选包胆高手| www.821928.com-湖北精彩十分钟玩法| www.62117.cc-xr开原彩-| www.5970.me-我要看体彩排列三| www.86qo.com-爱开彩彩-| www.251271.com-今日中彩有什么奥妙| www.qb34.com-新彩网下载-| www.19eo.com-男子借钱买彩票| www.926116.com-大乐透彩票资讯| www.385138.com-唯彩会彩票开奖查绚| www.09279.com-山西体彩电话投注| www.095253.com-重庆时时彩心得| www.908917.com-今天开啥彩票双色球| www.540125.com-彩票助赢论坛| www.233776.com-甘肃快三豹子号统计| www.314996.com-七星彩加倍中奖规则| www.414501.com-武威快三开奖结果| www.517422.com-排列3双彩论坛| www.45eb.com-网络投彩平台安全吗| www.5638.pw-亿发博彩-| www.100772.com-乐彩客登录-| www.779208.com-下带福利彩票双色球| www.882398.com-江苏快三和值奖金| www.959894.com-网上买彩票的兼职| www.cp890.cc-大发快三代理| www.42188.cc-百彩网网址是什么| www.69fl.com-福乐彩票-| www.638008.com-竞彩计划网址| www.812923.com-足彩预测单场专家| www.956515.com-安卓彩票应用大全| www.ej22.com-彩票投注策略| www.795108.com-深圳时时彩技巧稳赚| www.736311.com-免费带人回血彩票| www.649288.com-博发彩app下载| www.8095.vip-永利彩票违法吗| www.718692.com-彩虹七种颜色的图片| www.195576.com-吉林快三2o分钟图| www.292095.com-3d彩吧论坛图库| www.89639.cc-广州彩妆加盟| www.680472.com-333彩票官网| www.761254.com-体育彩票排列3| www.855616.com-今天的福彩开奖| www.060786.com-11选5私彩害人| www.96717.com-于海假彩票案| www.083223.com-快三属于犯法么| 易彩网www.12455d.com| www.350114.com-买彩票倾家当产的人| www.502512.com-卓创国际彩票干嘛的| www.602717.com-福福建体育彩票网站| www.693013.com-乐米商城彩票| www.816449.com-如何开一个私彩平台| www.901476.com-k8彩票app下载| www.x69.org-大发彩票平台代理| www.453337.com-中国3d彩涂图迷| www.546258.com-高腾彩票机说明书| www.612378.com-南京雪中彩影和米兰| www.679828.com-彩票两元网走势| www.753888.cc-金利彩票破解器| www.813688.com-玩博彩能赚钱吗| www.886069.com-玩彩网触屏版| www.956511.com-富贵彩手机版| 利彩www.57578b.com| www.cs24.com-瑞彩祥云软件下载| www.td40.com-河北快三高手| www.9464.com-旧版够力七星彩下载| www.797735.com-9h99彩票-| www.872687.com-福彩迷是什么意思| www.947167.com-白岩松回应彩票审计| www.995952.com-足彩大1-| www.zb7.com-福彩快3有黑幕| www.4824.org-梦见去找彩票点| www.199942.com-甘肃快三开奖遗漏| www.712350.com-结婚彩礼一般多少钱| www.867155.com-体彩组选六8码遗漏| www.979992.com-体彩网上接单| www.nc04.com-中福彩官网app| www.27oq.com-我的彩票查询双色球| www.cc35.cc-福彩排列五开奖| www.585538.com-彩宝彩票cb116| www.686065.com-七星彩梦册解码| www.777682.com-159足球彩票网| www.845954.com-海南私彩合法吗| www.898548.com-福利彩票往期中奖| www.961463.com-彩多多苹果app| 易彩网www.36166u.com| www.go05.com-黑马致富彩票| www.yh40.cc-华东福彩-| www.7621.xyz-体育彩票的标志颜色| www.626901.com-彩票手机平台| www.hp42.com-足球彩票预测公式| www.861.in-彩铅绘画夕阳| www.990915.com-吉祥彩票快三| www.xq32.com-彩票投注站怎么赚钱| www.4360.in-微信新未来彩票| www.15281.cc-谁有吉林快三群| www.71592.com-不懂彩票怎么买| www.7119.win-七彩孔雀蓝建盏| www.51263.cc-1166彩票-| www.55159.cc-澳门时时彩开奖网站| www.175332.com-福建福彩网-| www.930712.com-国外高频彩走势图| www.6449.cm-体彩e球彩助手| www.85345.com-七星彩30期走势图| www.730590.com-易彩网提现-| www.972831.com-日彩网1分快3| www.dc59.com-彩票365正规吗| www.40cr.cc-七星彩投注官网| www.247556.com-快乐彩一定牛| www.570057.com-3分彩全天计划| www.654876.com-时时彩复式怎么选号| www.859926.com-vivox23幻彩| www.928938.com-众赢国际彩票的骗局| www.973400.com-彩虹吉他-| www.lj.cc-快三赚钱吗-| www.326237.com-易彩彩民福地网址| www.35jg.com-五分彩出号有规律吗| www.542639.com-福彩期3d开奖结果| www.653022.com-东方彩票香港| www.716682.com-彩铅画鲸-| www.830889.com-彩票十一选五手机版| www.922337.com-竞彩足彩比分直播| www.1sw.cc-头奖彩票怎么处理了| www.790117.com-36选7好彩3玩法| www.867880.com-福彩开奖时间星期几| www.948813.com-五分彩是什么彩票| 博友彩www.381772.com| www.el56.com-众彩网专家预测汇总|