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.4980.cc-彩票平台怎么赢| www.179830.com-黑龙江快三走势图| www.252258.com-旺彩双色球官网下载| www.349355.com-海囗彩票网-| www.083806.com-彩票代理平台的背后| www.971660.com-全彩无遮挡本子库| www.836494.com-微易彩赚钱真的吗| www.4064.in-彩票概率统计公式| www.755892.com-竞彩娱乐-| www.0447.cm-刮刮彩票中奖秘诀| www.843077.com-福彩知识考试题| www.2465.net-福彩3d字谜双彩| www.17112.com-彩辉纺织有限公司| www.939745.com-代玩福彩快三犯法吗| www.cai1055.com快三有官方网站| www.362661.com-福彩3d预测字画迷| www.016.cc-足彩返奖率越高| www.059067.com-布衣天下彩吧288| www.098488.com-gc国彩彩票站| www.ue57.com-苹果彩票pg59| www.6732.org-赢钱彩是什么| www.up38.com-彩票快三走势图| www.378295.com-彩虹四无人机试飞| www.497857.com-金利彩票手机版官网| www.970094.com-今天的七彩奖是什么| www.br09.com-至尊快三-| www.654847.com-买彩票都是假的吧| www.891968.com-彩宝贝杀号-| www.969646.com-快三网上购买火车票| www.cp1300.com-五分快三精准计划| www.8718.in-福彩3d彩民开机号| www.023777.com-七天彩票注册网站| www.648110.com-新浪网数字彩票频道| www.827625.com-3分彩官方下载| www.900252.com-竞彩报-| www.969101.com-兼职刷彩金单| www.568499.com-彩站宝电话-| www.699765.com-彩客站贴吧-| www.04gy.com-彩铅名画图片| www.683989.com-江苏快三邀请码| www.595911.com-鑫亿彩邀请码| www.709232.com-竞彩篮球今日赛事| www.593349.com-体彩七位数数字范围| www.690234.com-足彩胜负彩走势图| www.797313.com-彩民彩票免费大全| www.590146.com-足彩每日分析推荐| www.669503.com-彩凤临门的意思| www.753047.com-彩票开奖查询试号机| www.33081.com-江苏快三推荐豹子| www.002659.cc-海南七星彩预测软件| www.127601.com-彩虹玫瑰的制作| www.088331.com-福彩选四-| www.932861.com-118彩票可靠吗| www.43rv.com-福彩双色球太假了| www.034902.com-百富博彩论坛| www.486941.com-竞彩每天几点开售| www.618941.com-福彩宝石连线规则| www.35838.com-旺角彩皇开奖| www.825485.com-快三开奖查询今天| www.899533.com-彩6精华版相似软件| www.964891.com-18彩票的网址| 幸运彩票www.550919.com| www.iy22.com-浙江体育彩票| 新浪爱彩www.59988.cc| www.58978.cc-福彩试机号和金码| www.452833.com-竞彩让球平技巧| www.609711.com-6288彩票-| www.65434.com-快三内部号码一注| www.606618.com-长沙体彩杯击剑黑| www.lf92.com-旺彩福利彩票下载| www.y10.com-体彩排列五手机投注| www.97111.com-足彩大神推单的软件| www.g20.club-福彩快3开奖原理| www.cp6657.com-app福彩-| www.48ey.com-中国体育彩票标志图| www.99626.com-大通彩票登录页面| www.tv76.com-快三高频彩app| www.797172.com-天津时时彩直播| www.877902.com-彩迷朋友-| www.954882.com-澳洲5分彩能赢钱吗| 亿彩www.6832p.com| www.gi45.com-彩八彩票168| www.vx52.com-时时彩百位杀号法| www.5173.la-韩国彩票是真的吗| www.095516.com-多彩贵州贵阳频道| www.234119.com-安徽福彩中心地址| www.qz68.com-快三输了几十万| www.235970.com-官方快三-| www.470060.com-足彩是赌博-| www.175870.com-快三赚钱-| www.205622.com-淘宝彩票一我的账户| www.361615.com-彩票不让提现怎么办| www.563840.com-新生彩票平台登| www.634777.com-建盏七彩光效果图| www.744899.com-新版本彩票77| www.826729.com-彩管家下载安装| www.916936.com-必赢彩票结局| 天天彩票www.7782x.com| www.421400.cc-东方彩票香港彩| www.595160.com-双彩论坛3d双采图| www.21dr.com-彩票平台数据接口| www.978944.com-美国好彩蓝莓单爆珠| www.fb06.com-瑞彩祥云快三技巧| www.811129.com-福彩选号方法与技巧| www.293652.com-快三追号计划表| www.501893.com-易彩网平正规平台吗| www.590827.com-体彩748前后关系| www.4928.vip-体彩7星彩奖金查| www.04kv.com-用彩色铅笔画画| www.459796.com-彩票是个坑-| www.552553.com-福建多金彩走势图| www.615100.com-今日说法彩票案视频| www.16id.com-幸运5星彩开奖| www.f22.cc-彩票网址大全平台| www.74cg.com-3d黑彩技巧-| www.1396.win-66彩票-| www.790.vip-易彩堂骗局-| www.227538.com-快三手机app| www.ot22.com-正规彩票购彩软件| www.574566.com-中福彩票在线| www.662167.com-5808万彩票造假| www.926669.com-彩票降价-| www.gb47.com-彩九app下载| www.z11.in-华夏云彩app下载| www.392400.com-福彩3d中间值遗漏| www.542038.com-广州超大彩箱厂| www.653029.com-8炫彩玩法-| www.307791.com-福利彩票时时彩| www.157601.com-足彩冷门买法| www.839934.com-pc彩票-| www.919697.com-彩乐乐网站正规吗| www.974428.com-哪个app能买彩票| www.120991.com-pc蛋蛋彩票下载| www.905171.com-有没有快三群| www.979590.com-江苏快三冷热号| www.dl4.cc-怎么玩快三赚钱| www.453187.com-什么是彩礼钱| www.kv71.com-玩快三合法吗| www.740743.cc-澳门几大博彩集团| www.654204.com-福彩代销费怎么结算| www.111782.com-彩票送28元体验金| www.87339.com-933彩票安卓| www.370669.com-彩狼软件视频教程| www.442179.com-彩票中奖号排三| www.662.red-福彩北斗-| www.69488.com-足彩稳定盈利计划| www.970246.com-体育彩票信息| www.rh03.com-甘肃11选5爱彩乐| www.1571.wang-彩票开奖时-| www.0536.loan-福彩三的牛彩图迷| 126彩票网www.009275.com| www.177120.com-百盈快三害了多少人| www.v59.com-福彩老北独胆预测| www.895807.com-福利彩票今晚开什么| www.084933.com-天天赢彩票网址| www.58038.com-官方正规彩票app| www.9700.top-三d风云彩票| www.275731.com-天津时时彩漏洞| www.603496.com-ag体育博彩正规吗| www.699407.com-体彩七乐彩的玩法| www.346022.com-彩神x官网登录| www.30509.com-京东福彩-| www.544453.com-百宝彩双色球| www.653881.com-奔腾彩票是什么|