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.tw57.com-河北爱乐彩11选五| www.67df.com-彩票会员线路| www.ms24.com-赢彩票app-| www.26zo.com-怎么加盟体育彩票| www.125407.com-pk彩交流-| www.628295.com-下载华夏_彩票| www.720672.com-彩票选号技巧书籍| www.796498.com-马来分分彩开奖结果| www.872703.com-福彩迷平台怎么样| www.943122.com-易盈彩票官方下载| 网易彩票www.070wy.com| www.323619.com-新加坡天天彩资讯绷| www.608153.com-快乐彩35期开奖| www.752733.com-彩票程序源码| www.881473.com-网上平台彩票合法吗| www.995050.com-惠彩网是真的吗| www.gh31.com-彩票快三代理| www.615522.com-彩票十大专家杀蓝号| www.761153.com-彩票牛牛玩法| www.851895.com-内蒙古体彩十一选5| www.920278.com-福彩分分快三| 福利彩票www.8039i.com| www.jb36.com-体彩足球竞彩网| www.4689.top-彩票可以提前买几期| www.dy96.com-吉林快三网站盘| www.20hi.com-丰隆彩旸香江价格| www.23887.cc-彩计划下载在哪下载| www.001727.com-彩宝贝网彩票选号器| www.907062.com-六位数的彩票网赌| www.96rt.com-彩排英语动词怎么说| www.386432.com-七彩奖开奖直播现场| www.110854.com-春节后彩票开奖日期| www.196989.com-彩票计划软件大全| www.299983.com-怎么预测彩票的走势| www.380272.com-派彩助手上海怏3| www.501844.com-乐聚彩票论坛| www.569913.com-返水最高平台博彩| www.659216.com-匕星彩开奖-| www.732007.com-百福彩是骗人的吗| www.813765.com-体彩88-| www.902173.com-福彩快三青海走势图| www.974074.com-熊猫??彩票-| www.om1.com-手机app彩票停售| www.tf46.com-和值彩票规律| www.028894.com-排列三乐彩网蛋蛋| www.338431.com-能合买的彩票| www.ep38.com-优信彩票真能提现吗| www.512552.com-彩铅动物简单图片| www.596347.com-足彩的返奖率| www.676408.com-江南彩姐彩票专栏| www.751428.com-彩票123网此| www.826022.com-体彩3亿大奖领奖| www.084599.com-福彩字迷图迷总会| www.65.me-皇樂彩票合法吗| www.0599.link-天天爱彩票可靠吗| www.50710.com-时时彩倍投的方法| www.024463.com-全民智投彩票骗局| www.178138.com-手机买彩票怎么买| www.ii69.cc-福彩在线购买app| www.655478.com-中信彩票官方网站| www.002444.com-七星彩走势图表最全| www.95er.com-附近体彩中心| www.95269.com-七乐彩精确组合| www.051174.com-3d通福彩下载安装| www.397851.com-章鱼彩票老版本| www.505721.com-彩票好吗-| www.567313.com-图拉斯手机彩膜| www.660220.com-nba新浪篮彩| www.724343.com-佛法看待彩票| www.789550.com-竞彩最大冷门| www.863119.com-智慧彩软件破解| www.918708.com-u9彩票下载-| www.975639.com-彩19彩票-| 126彩票网www.936126.com| www.315720.com-彩虹5无人机发动机| www.299175.com-网罗爱彩专栏| www.21696.cc-荣兴彩票官方网站| www.208629.com-兰州快三开出大奖| www.279375.com-网赚彩票单带计划| www.355744.com-竞彩中奖怎么缴税| www.424422.com-滨州福彩一点通| www.521266.cc-黑彩破解器app| www.590813.com-体彩842前后关系| www.319579.com-中国竞彩足球胜平负| www.387326.com-彩膜手机壳-| www.529744.com-如意彩票专家计划| www.bd70.com-甘肃快三今天开结果| www.qa83.com-093彩票官方版| www.11dm.com-足彩凯利指数秘诀| www.76lo.com-七乐彩几点停| www.110685.com-春节后福彩几号开售| www.202090.com-手机彩票软件大全| www.297675.com-玩一分快三欠了三万| www.378583.com-福彩排七走势图| www.509077.com-916全民彩票| www.586914.com-正规的竞彩-| www.684042.com-附近竞彩网点| www.780817.com-彩虹吉他谱c调| www.544020.com-我要中彩票下载安装| www.696797.com-彩客网竞彩足球吧| www.791142.com-青海福彩3d开奖| www.874785.com-7k彩票8-| www.949298.com-中彩那天教案| 8号彩票www.81520h.com| www.ml74.com-时时彩万能固定三码| www.1hn.cc-下载爱乐透彩票门户| www.79zf.com-三d牛彩网字谜九| www.011076.com-中国体彩手机在线| www.604929.com-开心彩票平台| www.703366.com-彩票模拟摇号| www.798788.com-玩时时彩稳赚| www.932298.cc-01彩票是真的吗| www.gv95.com-盈彩网揭秘在线| www.009.com-胜负彩预测网易| www.4568.cc-彩客吧是什么意思| www.9608.me-福彩农场今天| www.86470.com-竞彩猫公仔-| www.057471.com-福利彩票攻略| www.88583.com-宝利彩票推荐码| www.091096.com-快三赚流水-| www.142617.com-财神彩票正规吗| www.912402.com-彩票高手追号计划| www.970175.com-福彩彩迷-| 凤凰彩票www.452817.com| www.906701.com-中国体彩网足球比分| www.996569.com-黑龙江福彩兑奖地址| www.jj20.com-彩票时间差漏洞| www.15gz.com-福彩店装修-| www.jv44.com-天天彩票助手官方| www.166171.com-安徽快三-| www.362695.com-19025期足彩| www.tq24.com-福利彩票室内装修| www.097220.com-奥门基金六福彩| www.181095.com-今日中彩正规吗| www.087215.com-幸运彩票提现不了| www.83se.cc-福彩3d开机图今天| www.015865.com-够力七星体彩下载| www.172721.com-福彩3d过滤器| www.377410.com-977官方彩票| www.565673.com-今晚福彩3d怪字图| www.885221.com-福彩唐龙-| 13e彩票www.150196.com| www.222.top-九龙国际彩票平台| www.031104.com-大发快3淘彩票| www.185038.com-官彩诈骗-| www.301579.com-彩票预测大全下载| www.376055.com-彩票联盟app| www.499573.com-福利彩票真实中奖人| www.591451.com-澳客彩网比分直播| www.mz80.com-江西快三投注app| www.145922.com-彩票报纸金手指| www.4519.cn-彩票带赚是干什么的| www.85277.com-3d彩漫全彩| www.163859.com-彩票为什么这么害人| www.598510.com-19021七星彩| www.123.in-彩票平投玩法| www.87hg.cc-七乐彩奖池是多少| www.7759.com-彩票中奖者死亡| www.90210.com-恒大彩票赢钱犯法吗| www.284500.com-彩色资料-| www.378926.com-k彩安卓版下载| www.468844.com-彩迷直通车自动更新| www.557766.com-彩票彩宝贝预测汇总| www.624128.com-彩票33老版-|