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.047110.com-288彩票投注软件| www.859078.com-916官方彩票下载| 凤凰彩票www.77802s.com| www.72706.com-福彩智能语音投注站| www.186888.com-快三怎样找下期跨度| www.420131.com-体彩店投资多少钱| www.615308.com-时时彩搭建开发公司| www.815286.com-福彩3d工具图表| 3668彩票www.3668r.com| www.913578.com-老重庆时彩开奖号码| www.029721.com-彩票平投打法| www.189646.com-河南481彩票| www.136159.com-体彩篮球竞猜规则| www.258230.com-足彩反买-| www.81010.com-彩票道歉视频| www.au59.com-时时彩做号app| www.75884.cc-足彩看盘入门| www.142520.com-彩运8能玩吗| www.752593.com-彩虹六号围攻国服| www.cp2995.com-私彩能控制官方开奖| www.31531.cc-彩票上级如何黑下级| www.16395.cc-彩客网论坛-| www.01282.cc-彩运网怎么样| www.147417.com-华夏彩票软件下载| www.351661.com-彩票店利润怎么结算| www.30370.com-幸运28是啥彩票| www.791037.com-福彩3d走势彩宝| www.985857.com-福彩3d狐不归预测| www.xg03.com-晴予七星彩预测| www.7364.cc-体彩16字-| www.87181.com-体彩排列三谜语字谜| www.228898.com-分分快三免费计划| www.92xh.com-百乐彩彩票app| www.oq37.com-中彩票zcp-| www.971540.com-手机彩票客户端下载| www.22468.com-官方下载e彩堂| www.022151.com-神州彩票方下载| www.132000.cc-新县彩礼-| www.351009.com-双色球定胆杀号凤彩| www.019684.com-分分彩计划稳赢版| www.317348.com-七乐彩走势-| www.409407.com-万福彩票官网| www.575806.com-福彩3d字迷双彩论| www.026443.com-青海省福利彩票快三| www.101491.com-彩票aqq下载大全| www.989.hk-体彩有哪些种类玩法| www.040559.com-20选5彩票导航| www.216290.com-计划彩票助赢app| www.312833.com-三地中彩网走势图| www.898248.com-足球彩票的区别在哪| www.dg31.com-深圳福利彩票彩种| www.42kh.com-七彩阳光视频播放| www.cai1862.com河北快三遗漏统计| www.j29.org-青海福利彩票中心| www.3806.vip-开心彩票论坛手机版| www.13808.cc-七乐彩走势图乐彩网| www.003717.com-彩经彩票破解软件| www.089074.com-吉林快三稳赢的方法| www.176458.com-安徽福彩快三走势图| www.0433.tv-福彩p62往期开奖| www.06zc.com-彼岸花绘画图片彩铅| www.cl30.com-5分快3是什么彩票| www.5662.cm-香港生肖彩票| www.33xn.com-七星彩算局划归下载| www.675953.com-天天买彩票软件| www.855024.com-中竟彩网首页| www.944858.com-乐发彩票的邀请码| 星际www.910xj.com| www.496.tv-彩票漏洞刷钱| www.xn50.com-彩票app下载注册| www.924921.com-全民彩快3预测| www.bb60.com-福体彩开奖结果今天| www.775430.com-香港哪里有卖彩票| www.862397.com-澳客彩票手机触屏版| www.973920.com-新2官网彩票| www.nt11.com-福彩中心工作好不好| www.82nm.com-看陆和彩开奖的| www.6207.cn-福利彩票特别号到几| www.27211.cc-新2亦彩票论坛| www.906513.com-吉林省黑彩举报电话| www.81fo.com-足彩14场最新比分| www.629741.com-七彩平台-| www.776819.com-3d金码彩经网| www.866843.com-七星彩高手交流论坛| www.937096.com-七乐彩中奖-| www.912447.com-8号彩票站是真的吗| www.980652.com-易彩乐app-| www.mg3.cc-体彩上海快三| www.xe72.com-奔腾彩票app| www.531280.com-彩99ios-| www.658429.com-百宝彩机顶盒| www.911602.com-小鹿彩票软件下载| www.xp.cc-广西快三开奖结果控| www.35683.com-竞彩跟单-| www.770122.com-代玩福彩-| www.392373.com-如何购买大乐透彩票| www.209223.com-新疆福彩时时开奖| www.369202.com-尼彩手机官方旗舰店| www.558150.com-彩铅图画大全图片| www.671525.com-3d开奖彩宝网| www.841620.com-七乐彩选号方法| 人人彩票www.rrle6.com| www.611382.com-网吧怎么玩彩虹六号| www.753323.com-中华彩吧江苏快三| www.854454.com-搜索神马彩票| www.926287.com-乐米彩票靠谱吗| www.987480.com-玉林福彩中心在哪里| www.482634.com-中金彩注册-| www.335032.com-乐彩网3b-| www.441238.com-鼎盛彩票手机平台网| www.692179.com-3d彩乐乐杀和值尾| www.779257.com-圣地彩开奖结果查询| www.858749.com-体彩组六六码遗漏| www.956234.com-网易彩票开奖查洵| www.eq62.com-炫乐彩票登录入口| www.y59.com-广东福利彩快乐十分| www.073.bid-香港彩民村心水之家| www.5483.cm-长春纹彩刺青地址| www.24200.cc-中国福利彩票假| www.409686.com-中国体育彩票扑克牌| www.288203.com-中国福利彩票公开| www.457618.com-恒彩客户-| www.269901.com-66娱乐彩票-| www.494038.com-私彩跟官方串通| www.786269.com-彩票大赢家百度| www.0679.com-福利彩票到哪里加盟| www.21552.cc-老时时彩遗漏数据| www.87597.com-七彩球游戏-| www.079331.com-助赢彩票计划软件| www.262925.com-彩票微信群-| www.397655.com-七星彩蝴蝶是什么奖| www.bu63.com-甘肃快三豹子预测| www.559262.com-福彩兑奖多久到账| www.491946.com-威发彩票兼职| www.312853.com-最新彩票网站| www.6129.biz-19年的马彩-| www.003047.com-完美国际博彩| www.142999.com-奇门测港彩教程| www.287064.com-五亿彩官方-| www.893.red-金彩高手网天下彩票| www.324753.com-内蒙体彩十一选| www.499758.com-男网友叫一起玩彩票| www.565673.com-今晚福彩3d怪字图| www.636394.com-彩虹五无人机| www.687946.com-下载福彩网-| www.742909.com-免费彩金领取| www.674702.com-严打高频率彩票| www.824803.com-周口福彩中心在哪| www.989938.com-彩飘剂-| www.pp15.com-天天彩868-| www.083301.com-福建体育彩票3l| www.1403.net-彩宝贝专家预测利用| www.52715.cc-彩票系统带app| www.049688.com-贵州一分快三软件| www.59961.cc-彩店宝彩票靠谱| www.134767.com-白菜网送彩金交流群| www.806465.com-彩票模拟-| www.019989.com-500万彩票网购彩| www.186054.com-彩种最全的彩票平台| www.420578.com-金手指足彩应用| www.919655.com-中彩达人专栏| www.141735.com-爱乐彩官方网站| www.747629.com-彩运宝下载不了| www.124988.com-腾讯分分彩时时开奖|