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天

知道了
58福彩 www.121583.com-迪拜28彩票网站| www.157459.com-易彩骗局-| www.298837.com-豪彩下载-| www.267953.com-今日福彩3d舟全图| www.381265.com-今晚七乐彩几点开奖| www.kk9.com-惠民彩票一分快3| www.26pz.cc-杨哥风彩-| www.503658.com-本子娜彩-| www.606569.com-停止销售彩票世界杯| www.696175.com-3d南方双彩网| www.781758.com-彩票的偏态系数| www.874871.com-新宝彩票登录| www.950846.com-五分彩走势-| 天天彩票www.1035y.com| www.61fw.com-彩3下载安装到手机| www.300818.com-南方双彩3.0版| www.571950.com-彩83平台怎么样| www.088868.cc-彩票联盟可靠吗| www.131207.com-河南结婚多少彩礼| 凤凰彩票www.77801x.com| www.177347.com-江苏快三计划软件| www.070959.com-365彩票可以买吗| www.135000.cc-新亚安欣经营彩票吗| www.1us.com-diy贴彩膜-| www.769635.com-好彩香烟辨别真假| www.637.red-黑彩票网站大全| www.7070.com-群英会彩票空| www.37088.com-好运来彩票真的吗| www.001839.com-清各种釉彩大瓶| www.398981.com-众彩乐彩票网| www.559966.com-大公鸡七星彩神算子| www.661158.com-体彩18014期| www.740729.com-澳彩的诱盘和阻盘| www.849136.com-快三新规定-| www.925982.com-深圳试行区块链彩票| www.994041.com-凤凰彩票注册| www.q10.biz-福彩3的图迷总汇| www.85373.com-捷盈彩票怎么解绑| www.230055.com-百盈彩票有人赢了没| www.028490.com-3d图库彩吧| www.357606.com-顶呱刮彩票技巧| www.162927.com-凤凰网彩票合法吗| www.le65.com-河北冀彩宝下载安装| www.625468.com-七乐彩测号| www.362078.com-彩票网钱取不出来| www.507571.com-内蒙体彩联系| www.587887.com-彩色复印机机| www.23922.com-官方双色球彩票软件| www.001493.com-8亿彩票是真的吗| www.078013.com-中福时时彩怎么提现| www.197105.com-发达彩票的真实性| www.009989.com-澳客足彩比分直播| www.124918.com-吉祥彩票官方网站| www.36225.com-买体彩福彩-| www.82797.com-2013彩票网软件| www.043383.com-福利彩票刷流水| www.568871.cc-梦到买彩票中大奖了| www.76994.com-玩什么彩票的人多| www.sj96.com-体彩七位数最新预测| www.8330.top-七星彩心灵码仙视频| www.5435.top-今日足彩竞猜结果| www.284008.com-福彩所有彩种| www.968799.com-刷彩金违法吗| www.42sn.com-彩票怎么玩视频| www.527092.com-彩神x娱乐-| www.732872.com-苏州体彩中心地址| www.801689.com-福彩开奖杳绚| www.882478.com-易彩乐真的假的| www.948479.com-网上时彩真的假的| www.997907.com-3d大中小乐彩网| www.ey99.com-123采彩票网| www.yd7.com-彩神1下载-| www.cai9009.com福建快三跨度走势图| www.212631.com-新私彩平台-| www.292201.com-中国快三老快三| www.358249.com-有没有四个号的彩票| www.443806.com-华彩尚映贷款骗局| www.531259.com-时时彩违法吗| www.597911.com-体彩十一选五技术| www.672923.com-福彩中心咋投诉| www.760312.com-彩客网310胜负彩| www.827002.com-赚钱彩票送彩金| www.948724.com-北京快三预测群| 500彩票网www.65707r.com| www.227372.com-三分快三正规吗| www.353342.com-广东新粤彩报纸| www.54ye.com-彩票兑换中心商品| www.1379.vip-360彩票正规| www.9883.biz-福利彩票快乐彩查询| www.no15.com-大乐透彩票选号器| www.295223.com-河北快3彩票空| www.373591.com-快三有没有顺序| www.47jl.com-金手指胜负彩推荐| www.ku07.com-上海福彩集中账户| www.725433.com-快3彩票网站彩网址| www.0472.win-时时彩长龙提醒| www.i50.win-158彩票app-| www.qo09.com-快三查询表-| www.53456.cc-彩虹六号壁纸| www.034508.com-nba彩票真-| www.170709.com-河南快三遗漏数据| www.748811.com-彩51正规吗-| www.816424.com-快三一注中多少钱| www.886541.com-体彩七星彩论坛| www.952936.com-最新九州彩票新版本| 幸运众彩www.108097.com| www.524388.com-上海快三60期预测| www.85562.cc-彩票翻倍玩法| www.um68.com-内蒙古快三今天的| www.520129.com-福乐彩登录-| www.659636.com-乐彩网吧-| www.765463.com-彩票反水啥意| www.717210.com-名画彩铅-| www.4720.vip-中国红彩票兑奖| www.59au.com-最适合胆拖彩票| www.1502.cn-《彩虹的约定》歌曲| www.715541.com-大公鸡七星彩赚钱吗| www.800068.cc-福建体彩网官方微博| www.926868.com-红旗彩票合法么| www.992186.com-时时彩后三600注| www.bg32.com-福彩新快三-| www.0889.ren-泊松与足彩-| www.8020.club-水彩画图片简单| www.3560.com-重庆时时彩赛车| www.206923.com-易彩网官方-| www.226096.com-快乐彩官网-| www.301344.com-福彩三d组选走势图| www.387366.cc-8p彩膜-| www.fo4.com-时时彩5星和值| www.29772.com-一分快三提前预测| www.220768.com-北京5分彩开奖记录| www.301262.com-天下彩万彩吧资料| www.370141.com-手机彩膜华为p8| www.469925.com-快发彩票官方直营网| www.gt06.com-大发快三是国家彩票| www.3558.in-糖果派对彩金论坛| www.350428.com-福彩快乐分玩法规则| www.446331.com-重生之彩票大王| www.136775.com-彩票ftp-| www.580522.com-江苏福彩快-| www.698452.com-加兴福彩网-| www.771005.com-时时彩彩票代理返点| www.829560.com-48彩票下载-| www.881672.com-辉煌彩票靠谱吗| www.935017.com-彩票走势机顶盒| www.974575.com-好运来彩票平台网址| 大赢家彩票网www.178385.com| www.00029.com-福彩幸运二开奖结果| www.54267.cc-甘肃兰州快三查询| www.98116.cc-头奖彩票网址| www.06az.com-现在冀彩宝-| www.312033.com-福彩天地报纸谜语| www.mm39.com-时时彩后一平刷买法| www.948475.com-三d彩报图今天的| www.mx60.com-安徽快三预测大小| www.618028.com-幸运彩走势图软件| www.807237.com-竞猜足彩玩法| www.984645.com-国际彩票注册平台| www.787332.com-海南竞猜体育彩票| www.922908.com-福彩3d中心开机号| 彩票3www.808523.com| www.tt40.com-购买足彩-| www.001476.com-雪缘足彩园比分直播| www.701991.com-竞彩软件下载|