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天

知道了
彩票123现在叫什么名字 www.458486.com-鸿博彩票香港五分彩| www.17mw.com-名人堂彩票计划软件| www.12bf.com-浙江七乐彩走势图| www.1011.in-如意彩票网登入| www.590733.com-竞彩足球半全场推荐| www.02898.cc-中彩网中奖故事| www.446500.com-迷彩虎军情军事| www.558639.com-胜负彩半全场九场| www.972342.com-排列三走势图彩宝贝| www.7514.me-体彩旗舰店要求| www.409369.com-vr3分彩介绍| www.849223.com-体育彩票有客户端么| www.935105.com-彩名堂怎么打最稳| www.996758.com-福彩黑龙江网| www.cu61.com-彩票挂机真的稳赚吗| www.552747.com-彩票卖一张赚多少钱| www.639876.com-东方亮彩哪个部门好| www.36qa.com-七星彩一二位差值| www.218862.com-分分彩最牛回本技巧| www.293731.com-1分快三计划表| www.260262.com-中国福彩网快乐十二| www.191332.com-上海快三预测号码| www.291316.com-江苏快三三不同遗漏| www.386030.com-四川省体育福利彩票| www.524520.com-福彩3d组3技巧| www.631244.com-南阳中大奖彩票网站| www.537062.com-中奖彩票头像| www.627795.com-皇族彩票-| www.705662.com-网易彩票是怎么回事| www.0961.cc-皇都彩票彩票分折| www.615097.com-三彩玉是真玉吗| www.745813.com-棒棒彩票注册靠谱吗| www.mr2.com-玩彩票输了50万| www.zb59.com-彩票会作假吗| www.60hf.com-什么是购彩平台| www.2945.cn-体彩店装饰图| www.02770.com-体育彩票宁夏| www.67208.com-腾讯五分彩官网开奖| www.703442.com-福彩天地报今日版| www.096990.com-天齐彩票首页| www.738335.com-有玩彩票的群么| www.881747.com-0818彩票-| www.6967.biz-网络时时彩害人| www.389027.com-三明福利彩票站点| www.577755.com-分分彩龙虎玩法| www.718251.com-彩库宝典现场开奖| www.831136.com-国内彩票平台排名| www.932351.com-699彩票下载安卓| www.cai4577.com上海快三助手下载| www.xv09.com-01彩票下官方| www.962720.com-体彩绿翡翠-| www.555784.com-福建体育彩票36选| www.121467.com-福彩3d坐标连线图| www.69626.cc-彩票这期买什么号| www.77886.com-小剧场精彩表演视频| www.964243.com-竞彩足球胜平负结果| www.hf4.com-安徽快三赚钱技巧| www.ti97.com-公益彩票app| www.fj43.com-快3彩票害死多少人| www.5sk.com-英国彩票的税| www.60bi.com-专业玩彩个人论坛| www.820358.com-彩票领奖后不要做| www.927785.com-彩票生肖怎么打的| www.986559.com-皇冠足彩网-| www.bs61.com-快3彩票计划软件| www.406063.com-秘鲁彩虹山的形成| www.040009.com-江苏快三福彩| www.140074.com-官方01彩票app| www.229413.com-大发快三彩票合法吗| www.84044.cc-七星彩直播现场直播| www.44nq.com-竞猜胜平负新浪爱彩| www.272592.com-pc28彩票骗术| www.058758.com-彩神pk10手机版| www.279522.com-时时彩龙虎合玩法| www.902828.com-彩帝彩票客服平台| www.977562.com-2018世界杯足彩| www.fa1.cc-湖北湖北快三走势图| www.7444.vip-在线购买彩票| www.980162.com-足彩过滤软件手机版| www.dc99.com-快三每期开奖时间点| www.n76.shop-河南福利彩票网官网| www.3913.com-离婚男方给的彩礼钱| 全民汇彩票www.52303q.com| www.um53.com-快彩快三助手下载| PK彩票www.183699.com| www.nk28.com-网上竞彩app| www.9031.vip-百度彩票注册| www.352438.com-彩票黑平台举报电话| www.445566.com-nba精彩回放| www.539918.com-体彩定胆杀码| www.621841.com-3d福彩社区-| www.729173.com-重庆时彩结果| www.818724.com-五百万彩票怎么下| www.890809.com-魔方彩票可信吗| www.987418.com-国家合法的彩票平台| www.ln83.com-旺彩彩票app| www.334064.com-网络彩票不能提现| www.494403.com-沈阳铁西彩票站出兑| www.576472.com-唐山福彩中心招聘| www.659406.com-体彩七星彩大奖| www.748977.com-查彩票网-| www.843991.com-足彩交叉盘怎么买| www.900126.com-彩22平台下载地址| www.962489.com-济宁福利彩票首页| 盛彩网www.41518r.com| www.654078.com-福盈彩票-| www.826449.com-933彩票安卓下载| www.903508.com-赢彩吧注册-| www.956873.com-hk百彩免费资料| www.0fs.com-大乐彩票福-| www.58ob.com-黑名单中彩票| www.033376.com-515彩票-| www.103406.com-今日体彩开奖500| www.655512.com-足球新浪彩票网首页| www.975934.com-狂人时时彩后二直选| www.c33.org-百胜快三下载安装| www.27yy.cc-福利彩票注册| www.291.tv-环球彩票平台登陆| www.750820.com-香港百彩网开奖结果| www.861548.com-开体育彩票店赚钱吗| www.940278.com-吉林快三手机| www.991445.com-海南七星彩图规| www.cb14.com-易彩游戏app下载| www.gc71.com-福彩排列7开奖结果| www.456771.com-彩票总站图库| www.592980.com-体彩排3的算法| www.703919.cc-福彩3d助手ios| www.830128.com-大发快三作弊器原理| www.947165.com-开奖快的彩票都有啥| www.84cp.cc-好彩客app最新版| www.16318.cc-淘彩票是不是骗人的| www.89471.com-元角分彩软件下载| www.078042.com-福彩五分彩-| www.372078.com-分分彩开组三算法| www.238075.com-时时彩最准推算公式| www.338131.com-下载超级彩票| www.td2.com-抚州福彩中心在哪里| www.2098.pw-南京最新彩票应转让| www.994688.com-好彩客ios-| www.ql57.com-乐彩网福彩3d首| www.2543.pw-灯彩和彩灯区别| www.6178.shop-一定牛快三北京| www.19331.com-短信特邀彩金网站| www.166065.com-快三走势图怎么判断| www.185314.com-肖立刚教您玩快三| www.040708.com-博彩推广怎么做| www.872710.com-大乐透彩票字谜图迷| www.16600.com-彩票彩客电脑版网页| www.54806.com-彩票预测最准的专家| www.688736.com-彩29网址-| www.276875.com-快三全天计划免费版| www.155318.com-复式彩票中奖计算表| www.226213.com-彩神通软件-| www.309085.com-奇妙pk彩票软件| www.375171.com-福彩3d路数分析| www.1221.pw-湖北快三盘口| www.kh79.com-福利彩票数字3奖金| www.3564.biz-送18彩金-| www.66995.com-河南安阳福彩5亿| www.175256.com-北京快三助手苹果版| www.304704.com-一分快三有赢的吗| www.387226.com-尼彩官网首页| www.586968.com-竞彩足球在哪| www.yn2.cc-黑彩票平台提现技巧|