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天

知道了
9彩注册 www.654864.com-三分时彩-| www.882666.cc-彩票易-| www.wf71.com-今天福彩出奖号码| www.30pd.com-皇元彩票官网| www.844246.com-中福彩机构组成| www.322186.com-中国移动积分换彩票| www.80863.cc-排列3体彩-| www.vn32.com-2019快三彩票| www.08440.cc-最火的彩票销售系统| www.070722.com-玩高频彩的职业高手| www.24939.com-蒙娜丽莎是水彩画吗| www.pe67.com-彩票快3怎样追遗漏| www.141616.com-福利彩票怎么可以买| www.265816.com-银川福利彩票| www.358708.com-多盈彩票网址多少| www.459095.com-甘肃爱乐彩快3| www.xl10.com-鑫彩网是黑彩吗| www.557688.com-众够彩票会员登录| www.324441.com-福彩论坛实战擂台| www.747991.com-中乐彩下载-| www.804496.com-彩票半全场怎么玩| www.905217.com-在亿彩彩票上被骗| 彩客网www.606255.com| www.84tz.com-我爱中彩票-| www.83955.cc-星期三哪个彩票开奖| www.33595.cc-足彩19020期| www.8895.in-体彩竞彩大奖| www.42yo.com-玩彩票怎么做好计划| www.06ho.com-爱好48色彩铅色卡| www.298352.com-好123彩票-| www.595567.com-福彩3d千禧-| www.647409.com-好运来彩票怎么玩法| www.782782.com-快三秒奶茶怎么加盟| www.910016.com-彩界的精英-| www.981733.com-2019彩票网停售| www.nm69.com-时时彩助手挑号| www.755468.com-彩友会官网-| www.90636.com-赔率最高彩票平台| www.053209.com-郑州彩票店转让信息| www.224170.com-辽宁体彩11远5| www.611044.com-9d彩票下载安装| www.46ee.com-pc881彩讯-| www.057608.com-彩神3怎么玩| www.392462.com-神仙预测彩票| www.08qz.com-login彩票坊| www.41qv.com-彩吧彩报第一板| www.77385.cc-香港旺彩4肖8码| www.046657.com-福利彩票店装修成本| www.127014.com-江苏南京快三查询| www.cai4445.com河南快三开奖预测| www.308004.com-玩彩票时时彩| www.456340.com-福彩大乐透玩法| www.088366.com-众益彩票下载| www.222193.com-七星彩开奖历史列表| www.581566.com-福利彩票能挣钱吗| www.527936.com-彩票历史数据| www.082021.com-七星彩三字现规则| www.8760.in-名人彩票登录网页| www.69903.com-福利彩票怎么查| www.413276.com-道路彩色沥青价格| www.91zw.com-汇佰彩票是骗局揭秘| www.131960.com-彩礼法律规定| www.070927.com-365彩票怎么样| www.38rb.com-手绘彩铅之白凤九| www.151105.com-彩51平台-| www.365586.com-有人真的中国福彩吗| www.2501.net-聚彩彩票app官网| www.73990.com-极速时时彩彩走势图| www.5083.pw-足彩竞赛app| www.72px.com-足彩5场容错怎么买| www.295721.com-上海福彩d4-| www.64083.com-博友彩用户注册| www.183433.com-快三游戏规则| www.977502.com-潘多拉8度彩妆| www.800035.cc-福彩开奖结果与查询| www.798673.com-福彩3d刺客论坛| www.32pj.com-v8彩票怎么样| www.0857.cn-优彩社区四不像论坛| www.016555.com-购彩大厅官网| www.6538.cm-彩漂能祛白衣发红么| www.1225.cn-新快三遗漏360| www.068015.com-可以出票的假彩票机| www.209037.com-彩票51官网-| www.309377.com-吉林省时时彩| www.9821.org-3月28号的彩票| www.92968.cc-岩棉彩钢板价格表| www.066780.com-百盛博彩软件安卓版| www.gm58.com-河南帝彩快三是什么| www.6910.com-体星彩开奖结果查询| www.hz75.com-中国福彩排列5| www.575337.com-体彩彩票大奖图片| www.022632.com-福彩3d奇奇断组| www.619967.com-彩票业是不是邓家的| www.059988.com-中国福利彩票怎样玩| www.087093.com-足球彩票分析推荐| www.186049.com-玩快三的诀窍| www.285993.com-1216亚洲彩票网| www.52dt.com-时重庆时彩开奖结果| www.774045.com-澳门博彩游戏| www.341666.com-诺亚彩票注册| www.508122.com-七星彩开奖结果昨晚| www.604654.com-4567彩票客服| www.691013.com-足球竞彩比分360| www.966597.com-广西快三正规吗| www.26364.com-人人中彩票怎么更新| www.440151.com-苏快三好中吗| www.263973.com-下载优彩网-| www.359992.com-彩票开彩结果| www.611860.com-真实的体育彩票| www.851978.com-特彩吧高手网天下齐| www.962915.com-彩色水磨石地面图片| www.ix79.com-香港彩票大全| www.958749.com-贵州省中国彩票| 瑞彩网www.980158.com| www.878796.com-竞彩双平什么意思| www.se.com-3d彩票解密-| www.4758.me-游戏厅打彩票| www.15wl.com-周口体彩-| www.2457.pw-大博金彩票平台| www.630128.com-76cp彩票链接| www.150296.com-彩83彩票官网| www.8731.org-全民8五分彩| www.261828.com-福彩3d预测胆码| www.48xt.com-九万彩票充值没到账| www.15225.cc-6十1体育彩票下載| www.669277.com-彩票有哪几种软件| 大赢家彩票www.5086f.com| www.201.pw-儿童彩铅画花朵| www.636011.com-体彩每星期几开奖| www.173926.com-彩神iv下载-| www.430139.com-时时彩视频开奖下载| www.653019.com-澳彩客户端下载| www.858736.com-江苏快三形态一定牛| www.4156.org-彩虹10无人机规格| www.751074.com-速赢彩用户注册| www.863018.com-今晚的中国福利彩票| www.951684.com-足彩2串1全包买法| www.qb9.com-我要下载福彩快三| www.71201.com-微信怎么买体育彩票| www.035342.com-至尊快三网址| www.133838.com-好彩客安卓版下载| www.199683.com-福建彩民论坛| www.jw2.cc-河南福彩网官网| www.263277.com-3d彩吧助手走势图| www.8149.cm-贵州快三跨度分布图| www.36440.com-体彩和福彩买哪个好| www.938972.com-奥客网彩票-| www.988505.com-快三福彩规则| www.bl19.com-彩票预测计划| www.367991.com-七星彩完结番外| www.7450.vip-福建体育彩票申请| www.730090.com-六福彩票平台| www.234903.com-双彩论坛手机版| www.983223.com-彩38安装-| www.gh37.com-福建体彩网走势图| www.zt64.com-篮球彩票怎么买| www.532371.com-买彩票中奖秘籍| www.458555.com-跑马彩票网站| www.561175.com-天天彩票论坛一码| www.6759.net-87彩票店主版| www.06884.com-九州彩票是不是假的| www.393962.com-昨天的福彩开奖亏| 88彩票www.8839d.com| www.326529.com-彩八万app-|