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.639181.com-彩票预测有用吗| www.mc80.com-湖北快三每天多少期| www.040021.com-广东快彩-| www.956042.com-买彩票怎么开讲| www.lu36.com-三d彩票红五图库| www.84822.cc-福彩3d字画迷太湖| www.572765.com-上彩票官网-| www.cai2866.com内蒙古快三中奖规则| www.322337.com-彩票狂人王成舟| www.436611.com-巴西安伯快三| www.302365.com-中国福彩最新政策| www.395118.com-彩虹代刷正版查询| www.218059.com-网络彩票赌博犯法吗| www.273499.com-江苏快三稳赢计划| www.212370.com-淘宝网购彩票| www.192926.com-335彩票app-| www.268450.com-众彩网北京赛车| www.005462.com-45111彩民论| www.887002.com-全民彩票靠谱吗| www.626028.com-中华购彩-| www.216030.com-马来三分彩开奖号码| www.297837.com-湘潭市福彩中心在哪| www.393525.com-今晚彩票开什么| www.575576.com-时时彩万位杀号方法| www.661170.com-128福彩网-| www.738552.com-福彩中奖多少钱一注| www.828025.com-春天彩票是合法的吗| www.905370.com-足彩网上投注258| www.977239.com-天津福彩快了十分| www.ap46.com-吉林快三开奖直播| www.180471.com-上海快三在新开奖| www.968134.com-微信彩票群快三| www.jv91.com-彩铅入门画-| www.46un.com-澳客彩票赢平台| www.2638.pw-时时彩家网出租| www.64688.cc-竞彩输五万-| www.505414.com-快三单双技巧规律| www.614603.com-龙胜彩票游戏| www.722111.com-体彩门头多少一米| www.831240.com-胜负彩19033| www.911785.com-无意购买私彩违法吗| 天天彩票www.1035w.com| www.051392.com-中国福彩22选5| www.300058.com-全天快三计划稳定版| www.472395.com-彩票性缘原作者| www.731582.com-易彩网彩票-| www.ic63.com-快购彩票-| www.133374.com-众购彩票zg520| www.245394.com-易彩快3开奖号码| www.343582.com-赚钱平台彩票| www.118881.com-5oo彩轻聊版| www.805697.com-中国有那些彩票合法| www.969783.com-义乌彩票店转让信息| www.w12.me-中国体彩手机版| www.30566.com-富彩彩票是骗人的吗| www.965673.com-玩彩票安卓版下载| www.kx50.com-长城彩票app| www.700317.com-美人鱼彩票下载| www.789504.com-玩彩输了20万想死| www.889732.com-彩票最好的投注方法| www.ca80.com-如何买彩票新手入门| www.26ao.com-四川体彩金7宝约版| www.9309.org-七乐彩头奖要交| www.72244.cc-福利彩票店费用| www.651652.com-玩高频彩都是输| www.qa70.com-新彩国际app彩票| www.790.club-七彩虹官方网站| www.9168.net-pk彩票在线-| www.89455.cc-新彩彩票网-| www.103674.com-1700九州彩票| www.809563.com-管婆特马彩图| www.923453.com-秒速快三开奖| www.06qr.com-500彩票网资讯| www.22516.com-909彩票网-| www.402062.com-体彩七星彩图片大全| www.791422.com-排列三彩经网开机号| www.928164.com-派彩网官方网站| www.cp610.com-江苏快三app| www.zu56.com-彩96购彩平台下载| www.4777.hk-彩票断了能兑奖吗| www.202446.com-贵州福彩网下载| www.413626.com-足彩培训-| www.wl6.cc-彩票里的屠龙| www.352536.com-怎样投诉彩票网站| www.60302.com-杳彩票开奖查询| www.2py.com-鸿彩网直播下载| www.848799.com-汪汪时时彩最新版| www.961853.com-三彩服饰官方| www.zy0.com-彩票历史查询器| www.zm52.com-竞彩二串一稳胆推介| www.32xw.com-飞来福彩吧站长看彩| www.752361.com-彩票99官网-| www.826465.com-分分彩刷流水97注| www.905693.com-yy彩票揭秘-| www.968206.com-马云买大乐透彩票| 彩世界www.99788n.com| www.4787.net-758彩票腾牛| www.63899.cc-足彩胜负平中奖规则| www.053888.cc-世界杯彩票最多| www.462422.com-排三彩票专家| www.67108.com-邢台福彩中心地址| www.127448.com-好运来彩票诈骗| www.73891.com-彩宏娱乐app| www.31040.com-恶搞彩票中奖生成器| www.14ug.com-308彩票安卓版| www.981188.com-帮我选几个彩票号码| www.50cq.com-福彩3d老彩民心得| www.103904.com-台湾福星彩官方网站| www.29556.cc-175000乐彩网| www.9251.online万达彩高手论| 千禧彩票www.528qx.com| www.008762.com-彩票源码带开奖| www.859068.com-数字彩票计划| www.986577.com-158彩票下载| www.bp57.com-彩经网彩票工具软件| www.wd81.com-辽宁快三一共多少期| www.606778.com-互联网竞彩足球停售| www.736786.com-福彩3d乐彩论谈| www.882082.com-345彩票导航| www.984253.com-如何在竞彩猫上推荐| www.fj3.cc-十大靠谱彩票平台| www.vl10.com-湖北福彩开奖结果| www.8iz.com-天才彩票少女| www.33622.cc-彩神通关注碼| www.75966.cc-彩票多久不能兑| www.964016.com-双彩虹的寓意是什么| www.356287.com-彩票促销活动| www.480234.com-中闰彩吧网更懂彩民| www.066.xyz-七星彩中四个号不连| www.365915.cc-彩铅幼儿故事画| www.68755.cc-优盈彩票5分快3| www.lc13.com-体育彩票排列五| www.918183.com-私彩分分彩-| www.8500.pro-彩票平台bug破解| www.97740.com-时时彩预测-| www.17797.cc-体育竞彩推荐app| www.589053.com-七星彩论坛特区网| www.02224.cc-搜狗彩票彩种| www.876375.com-福彩3d奇奇断组| www.rr29.com-福利彩票奖池| www.643548.com-彩318平台-| www.860104.com-八亿彩-| www.36489.com-澳门官方哪个彩平台| www.004982.com-福彩票开奖查询软件| www.173871.com-新快三游戏-| www.577099.com-七星彩直播开奖搜狐| www.9495.cc-彩票的科学购买方法| www.32395.cc-d9彩票版平台下载| www.023721.com-彩迷会下载-| www.12533.cc-如何买彩票中奖| www.ta97.com-霸气十足的彩票网名| www.82hv.com-竞彩和北单区别| www.4630.vip-中国体彩篮球竞猜| www.34783.com-彩吧图库牛彩图库| www.008423.com-彩票平推一天| www.749900.com-双色球彩票大赢家| www.59893.com-网赌ag快乐彩| www.974100.com-彩票天下资料| www.723161.com-神彩时时彩趋势软件| www.872863.com-遵义福彩-| www.2012.org-968彩票代玩| www.233811.com-百度彩票走势图3d| www.87750.com-彩票藏机图是什么| www.62529.com-彩票跟单兼职|