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.jb38.com-中国足彩网踩踏视频| www.150338.com-下载福建体彩快三| www.22761.com-福彩3dqq交流群| www.487543.com-福彩3d今日说彩| www.854665.com-华夏彩票坑人| 818合彩www.www.9889hc.com| www.tq00.com-百姓彩票注册| www.922902.com-昆山福彩投注站转让| www.vp03.com-江苏快三计划专业版| www.789539.com-竞彩与滚球对冲| www.57614.com-辉煌彩票注册| www.59lj.com-买彩票每日有限额吗| www.3114.org-体彩中心主任简历| www.06262.cc-最棒的彩票软件| www.818181.cc-足球彩票19040| www.899880.com-聚彩彩票app| www.974160.com-网彩什么时候恢复| www.po8.com-韩国彩票开奖结果| www.ry29.com-福利彩票三d| www.07ou.com-花间美人古风彩铅画| www.079448.com-3d彩票怎么玩的| www.155611.com-上海快三什么时间开| www.131275.com-彩礼经典语句| www.676381.com-进口彩妆代理商| www.829233.com-网上买足彩可靠吗| www.940017.com-体彩11选5爱乐彩| 奔驰彩票www.781566.com| www.558649.com-快三豹子号中多少钱| www.165006.com-安徽体彩中心领导| www.554333.cc-3d彩票术语-| www.5032.cn-吉林市福彩地址| www.000164.com-重庆时时福利彩票| www.297640.com-贵州快三追号计划表| www.671766.com-体育彩票出什么号| www.811879.com-河北竞彩软件| www.892357.com-时时彩四星超强缩水| www.963471.com-简单彩铅画图片大全| 彩61www.018916.com| www.11953.cc-新浪彩票比分直播| www.058126.com-乐彩客下载app| www.263975.com-66976优彩彩票| www.882735.com-体彩刮刮乐中奖率| www.pc5.com-派彩电子走势图快3| www.752803.com-福利彩票破解| www.838525.com-q彩网是什么意思| www.908291.com-福彩怎样才算中奖| www.968904.com-彩金价格2018| 彩吧www.580296.com| www.lf57.com-5000彩票app| www.969787.com-福彩根本没人中奖| www.13pz.cc-2019彩吧图库| www.410884.com-彩客中国竞彩网首页| www.582683.com-足彩网胜负彩解盘| www.709026.com-久久彩票官方| www.796667.com-众慱彩票-| www.880561.com-大乐彩历史开奖号码| www.964880.com-体彩6十1开奖| www.cp473.com-大发快三彩票怎么玩| www.019002.com-手机版胜负彩过滤| www.754822.com-黑彩快三怎么拉人| www.782901.com-福运彩官网-| www.874786.com-k彩登录-| www.979417.com-好彩香烟绿色价格| www.zy0.cc-幸运快三追号计划| www.vp56.com-湖北体育彩票| www.477666.cc-萍乡福彩中心| www.xf04.com-103彩票app-| www.48wz.com-世界著名的十大博彩| www.010066.com-小米彩票中奖不承认| www.662708.com-体彩三亿在肥城| www.821065.com-彩混凝土做法| www.84532.com-福彩3d彩圣字谜| www.392633.com-搜狐彩票app| www.2942.shop-五星体彩店-| www.006373.com-冀彩宝投注-| www.086437.com-五福彩676cc| www.493338.com-中你体育彩票| www.567629.com-高频彩票为何一定输| www.639625.com-只赚佣金的竞彩玩法| www.714211.com-最牛时时彩后一计划| www.337907.com-今晚福彩的开奖号| www.44tw.com-a彩娱-| www.3699.org-手机苹果彩票| www.203946.com-牛彩网3d-| www.433866.com-开彩开彩-| www.516164.com-众赢彩票团队李胜| www.577757.com-帮我查一下福利彩票| www.639865.com-福彩计划网-| www.702250.com-竞猜足彩胜平负推荐| www.778995.com-好彩票app官网| www.845783.com-彩票有意思-| www.917628.com-彩吧助手专业走势图| www.971118.com-福利彩票都分多少种| 网易彩票www.560706.com| www.290208.com-彩吧app-| www.369843.com-竞彩封盘时间| www.490840.com-快开行彩票-| www.565387.com-今日福彩保真版图谜| www.637159.com-彩虹802无人机| www.705433.com-云购彩票是正规的吗| www.787959.com-cb8彩宝-| www.866640.com-福利彩什么时候开奖| www.934254.com-反套路彩票女| www.983072.com-盈彩吧是什么| www.cp749.com-快三首页-| www.556643.com-澳门有彩票买吗| www.657385.com-大通彩票手机板本| www.722257.com-整体彩铅画图片大全| www.xf72.com-河北福彩中奖规则| www.15tg.com-彩票咋买-| www.95xt.com-体彩胆拖是什么意思| www.2885.cm-更多精彩的视频| www.8049.xyz-水彩肖像画-| www.261523.com-大发快三登录网址| www.794888.com-飞鱼体育彩票网址| www.222168.cc-一分快三计划网页版| www.313301.com-彩票上海11选5| www.722448.com-网络快三怎么骗人| www.671590.com-彩10000-| www.733901.com-福利彩票容易中奖号| www.491208.com-彩票能退吗-| www.165500.cc-福利彩票发行时间| www.824128.com-三彩旗下有哪些品牌| www.221648.com-彩票开挂平台| www.57519.cc-体彩助手e-| www.240474.com-彩客app下载| www.171699.com-快三号码图-| www.254911.com-今天安徽快三| www.332146.com-彩票中头奖秘诀| www.425694.com-官方福彩中心| www.127355.com-彩虹玫瑰花图片| www.931717.com-数字型彩票规律| www.464338.com-地下六仺彩152期| www.244040.com-福彩中奖结果| www.421950.com-南宁体育彩票中心| www.62533.cc-河南休彩开奖结果| www.pj04.cc-500万彩票网下载| www.00po.com-福彩3d开状号| www.4ye.cc-福彩主任冯亚平电话| www.723572.com-镇江体彩怎么申请| www.36ji.com-彩客电脑网页版| www.99100.com-分分彩独胆技巧| www.860404.com-体育彩票大乐透吧| www.8308.org-彩友吧手机投注| www.155846.com-江西新快三和值表| www.306071.com-苏州福彩中心| www.588464.com-天空彩票与你同行| www.777781.com-中奖彩票票面的特征| www.ou34.com-福彩三地和值走势图| www.888371.com-七星彩今晚推荐号码| www.v55.com-禹州市彩票合买群| www.89017.com-百盈彩票被黑| www.654234.com-福利彩票时间| www.861870.com-河南省体彩中心加盟| www.928146.com-彩色复印机4色5色| www.246535.com-重庆快三app下载| www.957731.com-228乐透彩-| www.751214.com-博牛彩票是骗人的| www.034921.com-正规彩票平台注册| www.729306.com-神彩还是神采| www.880019.com-代打彩票游戏| www.969034.com-众彩彩票是合法的吗| www.80yq.com-网络彩票倍投的骗局| www.8988.vip-竞彩看盘技巧|