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天

知道了
彩01彩票 www.10103.cc-卖一张彩票能赚钱吗| www.23au.com-双彩网排三排五论坛| www.729456.com-手机版吉林快三图| www.926231.com-成功彩票注册| www.9278.net-乐彩客是正规的么| www.635703.com-彩虹6号围攻单机| www.074852.com-手机里买彩票怎么卖| www.29859.cc-杏彩娱乐app| www.94565.com-竞彩平均优化软件| www.3959.cm-奥博彩票app| www.53234.cc-貂蝉彩票专家专栏| www.923499.com-彩票店主吃票怎么判| 亚投彩票www.ya939.com| www.337779.com-青海中奖彩票| www.809059.com-105彩票真实吗| www.084118.com-巴中体彩大乐透中奖| www.204600.com-内蒙古一定牛彩票网| www.562685.com-8g神话彩票网址| www.770805.com-一分时时彩是真的吗| www.931988.com-彩票遗传数值| www.999661.com-什么网站可以买彩票| www.cl40.com-福彩三d预测| www.tv84.cc-福利彩票快开| www.06di.com-梦幻独角兽彩铅画| www.81no.com-5808体彩-| www.1946.cm-梦见彩票中大奖预兆| www.882944.com-彩之堂骗局揭秘| www.954615.com-足彩有世界杯吗| 亚洲彩www.68568q.com| www.kx36.com-福彩快三爱彩乐| www.e24.website如意彩票计划软件| www.39bu.com-彩票邀请码怎么弄| www.0566.xyz-琓彩人绝杀一码| www.5780.cm-彩票今日推荐号码| www.07576.cc-中彩那天的全文| www.cp810.cc-网上快三能玩吗| www.mv10.com-我要中彩app| www.715221.com-彩票一注一百倍| www.805668.com-买彩票是什么行业| www.886767.com-微信中国彩不能下分| www.964366.com-中国彩票开奖信息| 亿万彩票www.771049.com| www.634280.com-七彩花坊-| www.596499.com-有什么彩票计划软件| www.672517.com-彩八仙计划app| www.774497.com-彩票真的没有规律吗| www.869876.com-今天的3d福彩图纸| www.970827.com-迷彩兔网站下载| www.aa96.com-体彩排列5奖结果| www.053206.com-沉迷买足彩-| www.008381.com-福彩在线-| www.985623.com-竞彩单场推荐周六| www.471134.com-福彩3d黄金胆码| www.609358.com-彩票11选5玩法| www.717916.com-彩虹寓意-| www.800527.com-卓意彩票-| www.933657.com-分分钟彩票官方网站| www.995645.com-今日足球竞彩单场| www.at78.com-湖北福彩快三推荐号| www.w36.club-吉林快三群主跑路| www.ds38.com-时时彩刷流水方案| www.wy43.com-c8万彩吧cn-| www.817171.com-968彩票手机版| www.929971.com-大玩家彩票提不了款| 彩82www.290038.com| www.ri62.com-大发快三骰子模拟器| www.70ty.com-婚恋时时彩诈骗破案| www.57080.com-排三乐彩网开奖| www.153231.com-3d旺彩-| www.9595.org-老时彩开奖-| www.895784.com-印象彩票官方网站| www.672637.com-手机买足彩的软件| www.87sm.com-幸运十分彩开奖结果| www.117793.com-足彩新浪必发指数网| www.261292.com-福彩快三豹子守号表| www.214493.com-盛兴彩票网手机版| www.315385.com-建盏能养出七彩吗| www.397921.com-昨天七星彩中奖结果| www.h24.la-体彩今天试机| www.968302.com-高倍率彩票平台| www.725620.com-福星彩开奖记录| www.811811.com-新昌双彩乡-| www.97166.com-足球竞彩预测网站| www.472563.com-彩板车棚-| www.586924.com-福彩三d南方双彩网| www.336577.com-快钱彩票有人赢钱吗| www.188957.com-vip彩票网-| www.778784.com-9万彩票登录| www.904218.com-花式休闲快三谢俊娟| www.cp084.com-贵州快三走势图和值| www.88qx.com-和信彩票是不是黑网| www.297896.com-快三稳定心得| www.ce82.com-彩神v是真的吗| www.yy59.com-惠民彩票首页| www.72kh.com-nba体彩彩票网| www.cp5677.com-十分快三是国家的吗| www.897320.com-彩票网店宣传语| www.985640.com-淘宝快三怎么买| www.272387.com-彩70app-| www.355792.com-体彩亿元大奖骗局| www.478788.com-竞彩扫盘是什么意思| www.561188.com-天下彩008-| www.96189.com-石家庄福彩弃奖| www.4548.org-港彩网投app下载| 大赢家彩票平台www.976271.com| www.vy62.com-福彩快3图片| www.28639.cc-买竟彩-| www.86903.com-巴拿马快三查询| www.051728.com-赢彩票靠谱吗| www.352953.com-一洗彩染发剂怎么样| www.tm26.com-快三开奖预测软件| www.23il.com-彩21下载-| www.557330.com-水彩画图片简单画花| www.682520.com-用手机怎么买足彩| www.923193.com-彩票店怎么加盟电话| www.cp1120.com-快三免费计划网页| www.84lc.com-多彩网是不是黑庄| www.979623.com-足球竞彩平台| www.cf11.com-福彩3d合买app| www.vd10.com-快三开奖号码表查询| www.479618.com-江西省体彩中心主任| www.266050.com-快购彩票5-| www.642451.com-重庆时时彩宝典下载| www.711803.com-下载山东福彩| www.812666.cc-新彩吧彩票网站| www.894001.com-内蒙古快三派奖活动| www.ke67.com-彩票几天兑奖期限| www.58qk.com-天天好彩app下载| www.740.tv-八号彩票软件下载| www.5782.cc-深圳市福彩兑奖地址| www.548058.com-体彩数据接口| www.702798.com-竟彩网二维码| www.772550.com-彩票图表大全| www.826940.com-腾讯三分彩官网| www.881234.cc-福彩开奖号码查询今| www.938725.com-亿彩票app-| www.977492.com-彩妆店名字-| 网易彩票www.504633.com| www.491016.com-澳门十分彩-| 500彩票www.50024b.com| www.908785.com-全国彩票走势图大全| www.977309.com-河南南阳彩礼是多少| www.bk80.com-各种彩票大厅| www.tn94.com-500彩票有挂么| www.29be.com-福建体彩网下载软件| www.22934.com-王者彩票网站首页| www.529138.com-八卦测福彩-| www.616303.com-竞彩3串2几场容错| www.669596.com-易经与彩票-| www.002395.com-彩票指南盖尔霍华德| www.877933.com-3d牛彩网一-| www.13256.com-竞彩平局-| www.9597.shop-福利彩票20选五| www.55131.com-苹果时时彩开奖软件| www.523735.com-时时彩在哪里下载| www.860536.com-一会一开奖的彩票| www.969669.com-是福彩好还是体彩好| www.008528.com-智慧彩软件破解| www.599102.com-福利彩票秘籍| www.711819.com-微信七星彩-| www.70404.com-人人中彩票多久到账| www.678531.com-彩票不能网购了吗| www.7627.biz-体育彩票标志图片| www.081859.com-七星彩网站去哪里买|