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.56885.com-抚州市体彩中心地址| www.4xs.com-大彩网电话是多少| www.42611.com-彩票3d预测论坛| www.0485.cm-河南省福彩领奖地址| www.30517.cc-京东彩票是不是真的| www.9572.com-锡林浩特彩票中奖| www.708173.com-竞彩足球数据分析网| www.882397.com-五分彩是哪里开的| www.964942.com-体彩网电脑版| 瑞彩网www.809215.com| www.763512.com-足彩分析师面试题| 开心彩票www.367137.com| www.jf16.com-体育彩票兑奖地点| www.b10.com-全天重庆彩万位| www.51779.cc-牛彩平台新登录地址| www.019607.com-湖南体彩赛车| www.165505.com-7168网址彩票网| www.287165.com-安徽快三中奖规则| www.397522.com-福彩3d怪字帖吗| www.576924.com-红红火火彩票| www.684022.com-体彩跨度遗漏| www.812523.com-福彩3d必出两码| www.374920.com-福体彩直播间| www.913939.cc-3d彩之网相年富| www.89047.com-亿盈彩票app| www.337457.com-时时福彩下载安装| www.204950.com-最专业彩票选号软件| www.308319.com-长春三地彩报| www.120696.com-在哪买彩票安全可靠| www.881631.com-时时彩赌博群| www.210181.com-伯爵国际彩票网站| www.50593.com-博彩评级手机数码| www.096200.com-体彩公益-| 500万彩票www.96386m.com| www.702056.com-竞彩推荐app| www.972869.com-足彩胜平负彩客网| www.3136.cm-七星彩解诗网第一站| www.502195.com-彩礼排行最低| www.76gi.com-洛杉矶国际快三网址| www.918262.com-重庆市彩票越换中心| www.121229.com-彩票实体店微信号| www.yt52.com-3d彩票书籍-| www.919857.com-模拟彩票打印系统| www.102699.com-博众取彩的意思| www.339110.com-时彩族怎么打不开了| www.99272.com-时时彩全天最稳计划| www.110067.com-七星彩谁预测的最准| www.021836.com-福彩3d水果图正版| www.839.live-7500乐彩网-| www.8208.vip-北京pk彩票客服| www.665923.com-7乐彩中奖规则图片| www.772660.com-七七彩票app下载| www.858219.com-1516彩票下载| www.939258.com-下载福彩网站的网址| www.995405.com-北京彩票中过大奖吗| www.bv23.com-福利彩票查询扫一扫| www.556090.com-新三国精彩打斗视频| www.340064.com-金彩网靠谱吗| www.409621.com-彩票解梦大全查询| www.572366.com-青海省快三推存号| www.674540.com-财政部和彩票| www.750099.com-彩票app软件大全| www.823662.com-福彩3d双彩图谜| www.886668.com-丹东福彩双色球杀号| www.024660.com-多彩网3d-| www.894114.com-财神会彩票手机登录| www.972804.com-彩铅蝴蝶兰-| www.cp3755.com-彩8是骗局吗| www.187629.com-不怕挂时时彩方案| www.920637.com-cpyes时时彩| 易彩网www.12455g.com| www.xr11.com-中国彩票中奖者被杀| www.835295.com-好彩多少钱一包| www.935296.com-好彩票ios-| www.pm2.cc-大发快三开奖规律| www.f09.org-彩78网站怎么样| www.016733.com-跑马彩票三分钟技巧| www.04bw.com-吉林快三龙多少把| www.113665.com-三彩服饰价格| www.211377.com-五分快三是官方的吗| www.pj96.cc-北京市快三开奖查询| www.622214.com-镀锌彩涂钢板| www.703369.com-彩票小狂人-| www.788364.com-足球彩票19042| www.869825.com-怎么看彩票开奖视频| www.947217.com-美国加州彩票| 彩票大家乐www.21202f.com| www.724816.com-普通人能中彩票吗| www.499089.com-平台投彩-| www.563740.com-八角星彩票-| www.646456.com-足彩稳赢技巧| www.707695.com-彩票号码历史开奖| www.776669.cc-福利彩票有什么技巧| www.v18.hk-19036足彩分析| www.0412.vip-彩乐园ll应用下载| www.5981.cn-体育彩票公益宣传| www.01250.com-下彩网触屏版本| www.222257.com-117彩票app-| www.142037.com-警察怎么不抓时时彩| www.259888.com-福利彩票随机选号码| www.355373.com-怎么看五分彩趋势| www.432877.com-彩票中奖查询计算器| www.96xs.com-彩排的意义-| www.757792.com-彩票双色球胆拖玩法| www.862830.com-看更多精彩视频| www.924568.com-世纪佳缘上说买彩票| www.987892.com-恐龙快三打-| www.i50.pw-彩娃彩票官网| www.322523.com-足彩8串1推荐| www.456899.cc-vr金星彩票-| www.537955.com-彩云国蓝家-| www.8880.live-2019竞彩调整| www.31738.com-易彩网首页-| www.73821.com-福利彩票网上买| www.32hx.com-金钱豹时时彩网址| www.123263.com-精彩音乐会-| www.682135.com-微彩吧兼职是骗局| www.867858.com-星期三开奖的彩票| www.929789.com-七乐彩胆拖计算表| www.974691.com-南国彩票七彩论坛| www.bm37.cc-阿里彩票骗局| www.71488.com-必中彩票提现| www.5489.vip-彩虹代刷系统官网| www.g96.cc-旧特彩吧app| www.009753.com-手机上如何买福彩| www.201430.com-七星彩走势图表2元| www.171822.com-一分快三-| www.955376.com-凤凰彩票开挂软件| www.cd0.com-彩59app-| www.883882.com-3d彩界元宝-| www.954034.com-彩票专家预测推荐| www.999734.com-手机456彩票下载| www.6877.in-60万一盒好彩香烟| www.23816.com-体彩公司有哪些| www.55874.com-彩票快3走势图| www.93029.com-七星彩开奖最新结果| www.948079.com-怎么加盟福利彩票店| www.341231.com-体彩能真中奖么| www.52290.com-幸运中彩票安卓版| www.031112.com-天天购彩网登录| www.583917.com-中彩彩票平台网址| www.653191.com-49彩票平台黑不黑| www.773946.com-彩博888官网下载| www.828210.com-新生娱乐彩票| www.893613.com-彩票中奖去哪里兑换| www.962258.com-福彩3d3跨-| 126彩票网www.576126.com| www.n11.me-网上购彩平台可靠吗| www.52837.cc-好彩头app下载| www.829.red-刮彩票直播-| www.6375.biz-乐彩3337-| www.30209.com-福彩门户新书签| www.77075.com-彩吧助手彩票| www.56308.com-石家庄福彩助学| www.95306.com-七乐彩网上怎么买| www.668491.com-买哪种彩票比较公平| www.736573.com-上海体彩站分布图| www.797359.com-500彩票系统源码| www.857390.com-利搏彩票是真是假| www.900535.com-淘彩app平台| www.963495.com-买足球彩票的软件| 华彩www.71399x.com| www.hx43.com-彩乐汇是不是假的| www.657.cm-特特彩吧-|