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.971500.com-陕西福彩3b字谜| www.72ti.com-福利彩世界网站多少| www.965659.com-彩票宝中提现失败| www.zc14.com-甘肃福利彩票| www.97qi.com-哪些彩票网有送彩金| www.148342.com-百胜快三有假吗| www.827252.com-下载3d彩易网| www.924938.com-也买彩平台网站| www.983645.com-网络彩票举报电话| www.fz3.cc-快三技巧数学公式图| www.25be.com-凤城十路有彩票店| www.638957.com-91彩店联盟-| www.845728.com-湖北福彩中心在哪| www.88003.cc-快乐3分彩技巧| www.667002.com-下载福彩中心开奖| www.71441.com-开彩妆加盟店排行榜| www.793518.com-网络彩票输了很多钱| www.693283.com-今日福彩中奖结果| www.798752.com-时时彩后二最新公式| www.142146.com-中国福利彩票什么玩| www.322843.com-体育彩票481购买| www.026259.com-大发快三顺投技巧| www.153368.com-体彩是几位数选6| www.937838.com-彩票软件时时彩送| www.dy50.com-双赢彩票5567| www.676906.com-彩色压印混凝土厚度| www.575697.com-99彩票软件下载| www.659482.com-诸葛团队35彩票| www.759652.com-时时彩开奖宝典下载| www.828158.com-体彩胜负彩中奖案例| www.129042.com-手机福彩一分| 大赢家彩票平台www.351867.com| www.959928.com-手机买大乐透彩票| www.031315.com-下彩彩票客户端安卓| www.165503.com-省福彩发行中心待遇| www.7451.shop-体彩申请单位| 名门彩www.33997p.com| www.121944.com-英国时时彩资讯网| www.037744.com-七乐彩缩水过滤工具| www.982225.com-3d福利彩票字谜| www.fi11.com-时时彩51计划网| www.g97.club-彩票精准预测app| www.71849.com-福利彩票快三1月2| www.791949.com-附近彩票站电话| www.869661.com-鸿运彩票提现不了| www.941667.com-凤凰彩票网-| www.989244.com-福彩快三过年休几天| www.pi35.com-3d福彩规则-| www.5029.biz-福利彩票是怎么买法| www.634.cm-福彩网邀请码多少| www.7211.com-彩虹六号版本区别| www.622267.com-九彩洗衣液-| www.922058.com-地区快三计划| www.ei11.com-福建福彩公示| www.d83.pw-手机彩票导航| www.84nl.com-kpl五大精彩瞬间| www.43345.cc-云南体彩网-| www.1934.tv-信阳体彩管理中心| www.032324.com-如何辨别彩票真假| www.185297.com-广东彩票26选5| www.257727.com-中彩手彩票注册不了| www.365666.com-彼岸花彩铅绘画教程| www.64xk.com-老谢说彩预测3d| www.782615.com-怎么下载意彩平台| www.815133.com-彩票站黑彩举报电话| www.tr05.com-安徽快三贴吧| www.71gp.com-买彩票诗-| www.151816.com-彩票几位数字| www.237423.com-中国福彩双色球预测| www.318146.com-彩票有几种-| www.8362.biz-七星彩app安卓| www.361787.com-体彩8+3价格| www.852682.com-手机qq彩票金豆| www.844496.com-中国互联网彩票政策| www.562889.com-彩3软件-| www.0182.xyz-百度网上彩票合法吗| www.503534.com-体彩验票-| www.963915.com-彩票六大网投| www.040199.com-鸿彩快三手机下载| www.760.in-百乐彩1001-| www.719144.com-福彩三地今天开机后| www.cp9565.com-中彩网提现是真的吗| www.85pz.cc-彩友多彩票-| www.514822.com-网上七星彩合法吗| www.42fv.com-绍兴市体彩中心址| www.619057.com-彩妆店装修图片欣赏| www.d69.com-中国手机彩票123| www.555649.cc-全富彩票代玩| 中国福利彩票www.33588w.com| www.671545.com-大发快三和值预算| www.933750.com-福彩高频彩app| www.811209.com-中国体彩排列3| www.nh64.com-彩票大赢家论坛| www.0407.xyz-网络高频彩为什么输| www.795411.com-重庆时时彩彩彩乐| www.cp688.com-大发快三-| www.995774.com-新浪彩通-| 旭彩www.565378.com| www.155227.com-希腊十分彩开奖号码| www.333864.com-美国彩票规则介绍| www.456738.com-蛋蛋彩画-| www.588628.com-公益快三网赚靠谱吗| www.699638.com-快中彩票-| www.811383.com-山西福彩3d走| www.919852.com-彩票模拟打印系统| 大赢家彩票平台www.916730.com| www.331878.com-大发时时彩稳赚方法| www.434384.com-中国移动代购彩票| www.541356.com-玩什么彩票赚钱| 华亿彩www.cai003.vip| www.797105.com-凤凰2彩票-| www.cai9911.com河北快三每天多少期| www.vx20.com-贵州遵义福彩中心| www.915580.com-彩票客户端版本| www.312358.com-51彩票网官网首页| www.079057.com-彩8计划助手| www.717901.com-八卦奇门彩票取数法| www.aw80.com-福利彩票任三技巧| www.j73.cn-i8彩票平台登录| www.22907.cc-福彩彩票开奖查询| www.246768.com-凤彩网双色球| www.416955.com-中体彩唯一官方网站| www.520570.com-为什么当彩票托| www.609466.com-华东福彩15选5| www.691919.com-说戒彩票就是戒不掉| www.778550.com-安徵快三基本走势图| www.861810.com-腾讯时时彩开奖号| www.937452.com-7星彩复式计算器| www.644409.com-九号彩票是不是骗局| www.ag31.cc-彩票hαo网络| www.809072.com-中博彩票下载| www.906185.com-吉林快三会不会作弊| www.981147.com-七彩格子是真是假| www.xc87.com-排列三彩经网杀号| www.hz93.com-68彩票下载-| www.14rk.com-16588立彩-| www.ge27.com-湖北快三游戏开奖| www.244427.com-京东彩票在哪里看| www.678777.com-福彩店能赚钱吗| www.822348.com-七星彩18149| www.932144.com-彩宝网官方网址| 天天彩票www.106396.com| www.769338.com-好彩来赚钱-| www.831537.com-竞彩实体店销量下滑| www.63yn.com-优优反波彩怎么样| www.879644.com-北京快乐彩8| www.447670.com-双色球老杨说彩专栏| www.12316.cc-时时彩国家正规的吗| www.43ud.com-喝彩的解释是什么| www.18937.com-福彩3d手机app| www.66372.com-彩票七乐彩中奖规则| www.sf10.com-快三开奖遗漏号| www.514140.com-xs原彩要不要开刀| www.700237.com-辽宁省体彩中心位置| www.xf08.com-欧洲幸运彩-| www.87np.com-天猫国际城购彩平台| www.636122.com-彩虹的儿歌-| www.777867.com-高手彩票特彩吧| www.906952.com-买哪种彩票好中奖| 博汇www.881803.com| www.a28.club-中华彩票网手机版| www.470455.com-博彩和体彩区别| www.228840.com-好彩客app官网| www.611033.com-北京买彩票中奖|