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.348283.com-台湾彩虹频道| www.065450.com-88彩票赌博-| www.30095.com-彩八彩票是不是合法| www.55971.cc-多彩彩票app下载| www.516436.com-彩票到底有没有猫腻| www.977524.com-18054期足彩| www.ow.cc-彩票兑奖地点| www.599191.cc-易彩集团是骗子| www.299348.com-怎样看彩票走势图| www.037137.com-福彩平台app| www.019.cc-苏宁易购app彩票| www.21445.com-时时彩和值技巧稳赚| www.499638.com-快乐五分钟彩票| www.2jy.cc-竞彩低赔陷阱| www.51352.cc-彩票不玩倍投| www.025857.com-加盟时时彩代理平台| www.123832.com-天天乐彩下载| www.76006.com-温州福彩店转让信息| www.106980.com-博彩白菜网址导航| www.8706.in-8828彩票诈骗| www.291981.com-体彩开奖号码今晚| www.344938.com-彩栗开奖结果查询| www.414822.com-江苏快三时间| www.545889.com-彩八仙pk手机版| www.638220.com-竞彩上海宝山网点| www.756741.com-全民玩彩票官网| www.838993.com-中国竞彩网推荐号码| www.909271.com-天津快三是真是假| www.981155.com-添点七彩鲜花| www.pd1.com-吉林快三和值走| www.tj38.com-深圳凤凰彩票| www.48178.com-庄家克星时时彩| www.667741.com-中彩票的几率多大| www.2363.cc-七彩云南第壹城价格| www.39065.com-中彩彩票注册账号| www.308706.com-彩票投注站加盟| www.wn22.com-体育彩票贴吧| www.582038.com-天天乐彩票是真的吗| www.4535.biz-顶尖的体育彩票| www.qv06.com-汪汪时时彩旧版本| www.656637.com-七彩票今天开奖结果| www.16895.cc-彩神平台不给提现| www.032135.com-体育彩票店加盟| www.147824.com-休闲快三慢动作教学| www.495954.com-如何看彩票图| www.654832.com-时时彩不败-| www.797672.com-中国彩吧新彩吧首页| www.922667.com-「人人买彩票| 中国福利彩票www.08588m.com| www.uu96.com-中国福利彩票快3| www.74pn.com-利奥平台彩票| www.49sg.com-彩友计划-| www.528827.com-跑狗彩票咋玩| www.656445.com-融彩网平台-| www.846667.com-福彩3d模拟购买| www.972194.com-快三在线计划网| www.vp01.com-360彩票开奖信息| www.90bp.com-中国体育彩票最大奖| www.4067.com-福利彩票会员告诉我| www.34975.com-高频彩联盟官网登录| www.086035.com-cc彩票聊天室| www.714351.com-时时彩四季发财规则| www.892648.com-足彩怎么买比分| www.ch06.com-快三赔投方法| www.3cn.com-天天彩票黑平台| www.97uf.com-彩吧第一版今天的| www.15283.cc-描写彩虹样子的句子| www.026050.com-内蒙福彩快三和尾| www.132936.com-模拟购彩快三app| www.647349.com-体体彩排列三| www.789826.com-银川福彩大奖无人领| www.936767.com-快发彩票app官网| www.cp752.com-玩快三群里个个赢钱| www.yd32.cc-贵阳福彩申请流程| www.38495.com-海南七星彩下注软件| www.116493.com-胜负彩一等奖| www.659867.com-褔彩票-| www.835936.com-中国福利彩票领奖处| 500彩票www.50052y.com| www.o78.cc-生日送彩票-| www.198.in-水彩笔渐变画| www.947316.com-赤峰快三走势图| www.ot5.cc-推荐几个彩票app| www.551315.com-足球四场进球彩推荐| www.04ul.com-竞彩理财计划| www.le78.com-河北燕赵风彩福彩网| www.511.red-网上彩票群骗局| www.254126.com-七星彩早版区| www.371908.com-天津彩-| www.550977.com-彩票中奖指的是什么| www.p91.net-快钱彩票怎么玩| www.612371.com-我要福彩3d试机号| www.469799.com-赌足彩输钱-| www.682196.com-北京体彩扫码投| www.088459.com-足彩开奖结果| www.225414.com-福彩摇奖机能否作弊| www.488290.com-八喜彩票骗局| www.74551.com-乐彩赛车开奖技巧| www.086555.com-开心彩票-| www.276551.com-苏州体育彩票网| www.403839.com-福彩双色球骗局| www.512042.com-动漫彩铅古风少女| www.668748.com-中国彩票害惨彩民| www.785355.com-七星彩跨度振幅度| www.883420.com-彩民村高手新水论坛| www.973124.com-凤彩网彩票官网下载| www.ye7.com-彩神大发-| www.p21.cc-中国体育彩票店好| www.89qi.com-竞彩老吴的微博| www.5286.wang-今晚七星彩测什么号| www.06324.com-体彩排列五遗漏统计| www.gm66.cc-彩票查询结果| www.602247.com-中彩票领奖有危险吗| www.958633.com-够力解梦图版七星彩| www.879770.com-甘肃快三开奖| www.2450.vip-甘肃快三速查表| www.91909.com-青海福彩网小黑板| www.254283.com-中大奖彩票-| www.352505.com-什么是基诺彩票| www.001052.com-快三精准算一号| www.189062.com-网彩平台-| www.511901.com-彩铅画超真实| www.616646.com-云顶国际博彩时时彩| www.948339.com-彩票投哪些注| www.592840.com-七彩阳光踢腿视频| www.3333.bid-汇彩网app官方网| www.151023.com-布衣天下图库多彩网| www.95219.com-国货彩妆品牌| www.083981.com-彩73app-| www.874361.com-大发快三和值预测| 500彩票www.66621q.com| www.mg90.com-爱乐彩票安卓系统| www.cs22.com-166彩票-| www.rf7.com-买重庆时彩高手心得| www.637214.com-彩虹6号哪个平台的| www.cp7890.com-彩票查询-| www.4ll.cc-双彩网双胆3胆| www.1444.xyz-电子游戏平台送彩金| www.82966.cc-五百万彩票号| www.iy83.com-体彩浙江6+1| www.12wz.com-彩票开户送| www.1588.cm-大公鸡七星彩神算子| www.51790.com-福彩3d速查图表| www.41323.com-网易彩票能提现吗| www.318374.com-福彩助手手机版| www.4482.cc-印尼分分彩开奖查询| www.399646.com-竞彩足球延期怎么算| www.691369.com-足球彩票aap| www.781972.com-体彩大乐透开奖结另| www.884733.com-鳄鱼彩票-| www.979182.com-福利彩票官网客户端| www.153.vip-彩虹天堂歌曲| www.612544.com-体育彩票世界杯倍率| www.706030.com-官网国乐彩-| www.789707.com-彩票试玩人员骗局| www.519488.com-福彩即开型彩票网售| www.767068.com-好运彩彩票快三| www.761549.com-鸿运彩票网登录方式| www.89686.com-4月份足彩对阵表| www.241684.com-2元彩票app-| www.362281.com-为什么玩彩票总是输| www.446262.com-七星彩包码研究| www.851340.com-结婚彩礼标语| www.990077.cc-梦见数字可以买彩票|