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.hc31.com-8彩是不是真的| www.293795.com-揭秘网络黑彩票| www.277993.com-安徽省福彩-| www.42768.com-中国彩票3d开机号| www.kl05.com-易彩堂app邀请码| www.644546.com-足彩19039大势| www.791610.com-百乐彩赚钱吗| www.285358.com-福彩快3助手官网| www.8683.loan-七乐彩诗谜-| www.940074.com-休彩排列5开奖号码| www.cai0599.com银川快三走势图| www.547488.com-一分快三怎么买| www.dq47.com-五省快三跨度一定牛| www.005763.com-汪汪时时彩官网| www.5123.cc-七星彩18138期| www.240.in-福彩新游戏-| www.112112.com-如何刷彩票返点| www.7831.top-生肖彩票49选一| www.76556.cc-买彩票中奖的故事| www.113057.com-8号彩票官网登录| www.240993.com-河北福彩快三下载| www.21707.com-彩票复选是什么意思| www.023542.com-最稳时彩买法| www.143812.com-今日福彩3地字迷| www.268015.com-精彩十分3d正视图| www.356624.com-大乐透是足彩么| www.456447.com-红彩影视直播| www.545583.com-快三交流吧-| www.626985.com-龙虎和彩票-| www.709448.com-彩票代打工资车| www.02890.com-百乐门快三-| www.70918.com-验证码送彩金| www.023869.com-竞彩足球算赌博吗| www.193880.com-湖北省快三走势图| www.969132.com-网易专家预测足彩| www.40kf.com-慧彩国际-| www.088521.com-中奖彩民-| www.657107.com-合肥福彩站点查询| www.998036.com-快发彩票是什么| www.2225.me-昆明七彩云南| www.44486.cc-中彩在线规则| www.186576.com-三分钟时彩-| www.216280.com-生肖彩票玩法| www.340703.com-三地牛彩网摘采网| www.621007.com-彩色混凝土地坪| www.n77.org-神彩网首页-| www.887360.com-高频彩票专家预测| www.42kt.com-七彩世界app下载| www.144459.com-足彩app我要推荐| www.251873.com-彩票12是怎么样的| www.343401.com-必中彩票软件怎么样| www.424677.com-彩票中了怎么领| www.531848.com-彩铅清新风景图片| www.642030.com-大厅体彩柜台| www.747570.com-苹果彩77官网下载| www.878189.com-分分彩挂机方案| www.qz3.com-快三出豹子的前兆| www.03fg.cc-彩票k线软件安卓| www.02063.com-彩678app官网| www.211665.com-k彩骗局揭秘| www.394380.com-海南彩票梦兆查询| www.528796.com-大六壬测福彩3d| www.610772.com-四川彩票大奖| www.66ud.com-拉菲时时彩2| www.890099.com-足竞彩-| www.957927.com-中国体彩改革| JJ彩票www.33063.cc| www.gk43.com-众赢彩票下载| www.b25.cn-重庆1分彩个位| www.784301.com-彩票强强安卓版下载| www.915908.com-手机彩票加盟代理| www.979831.com-恒大彩票-| www.bj59.com-乐盈彩票黑平台| www.vz53.com-人人彩票怎么玩| www.22ja.com-福彩有规律吗| www.1507.me-彩虹的约定双手简谱| www.8451.org-王博彩王中王| www.17115.com-竞彩兑奖要多久| www.99449.cc-彩票七位数中前六位| www.126547.com-博彩水位怎么看| www.040788.com-彩票平台骗局| www.155405.com-五百彩票是正规的吗| www.229629.com-河南体彩481直播| www.4158.biz-七彩旅游公有链骗局| www.02662.cc-玩彩票软件下载| www.69922.cc-8彩走势图-| www.8148.cc-福利彩票双色球三d| www.37629.cc-7星彩长条-| www.84801.com-7星彩票走势图大全| www.207508.com-内蒙快三专测豹子| www.323588.cc-快三实用选号技巧| www.404619.com-甘肃彩礼-| www.505484.com-高频十分彩走势图| www.611.com-黑彩票网站陷阱| www.652971.com-彩虹pk10计划| www.480234.com-中闰彩吧网更懂彩民| www.587563.com-13号彩票出什么号| www.667767.com-谁主管福彩-| www.876275.com-a700福利彩-| www.954537.com-牛蛙彩票开奖历史| 易彩集团www.25688l.com| www.0966.cn-买彩票数字-| www.8062.cn-水彩基础图片| www.41745.com-八方娱乐app彩票| www.86196.cc-和彩彩票app下载| www.056722.com-体彩网站下载| www.121737.com-5位彩票-| www.185431.com-彩票181-| www.253502.com-玩快三会被抓么| www.319244.com-竟彩胜平负-| www.41jg.com-体彩网站排列五下载| www.0828.cn-重庆时时彩宝宝计划| www.7348.cm-彩虹6下载-| www.39032.com-中彩彩票黑平台| www.60006.com-大发快三模拟器软件| www.001363.com-菲律宾彩票网上投注| www.6859.org-彩票6期倍投技巧| www.27022.com-彩票两元网正规吗| www.91635.com-好彩烟盒的设计分析| www.21699.com-互娱彩票-| www.058338.com-彩虹六号太难了| www.128470.com-500万彩软件| www.212549.com-私彩平台能玩不| www.095611.com-b爱彩乐-| www.639427.com-竞猜彩票app下载| www.713859.com-3d彩票下载安装| www.783197.com-苏州福彩在哪兑奖| www.849628.com-腾讯分分彩必中软件| www.901520.com-牛彩论谈首页官网| www.954531.com-信誉彩票1966| www.996845.com-每次都机选一注彩票| www.rv5.com-3d福彩走势图| www.39185.cc-体彩实体店网络购彩| www.035013.com-反水最多的彩票网| www.01265.com-体育彩票中奖票样| www.217058.com-省份快三是怎么回事| www.28575.cc-快3真的是福彩吗| www.760442.com-网上时时彩能提现吗| www.892906.com-体彩开奖洁果| 中彩网www.2408c.cc| www.875422.com-彩票梯子游戏注册| 13e彩票www.815870.com| 如意彩票www.865657.com| www.07645.com-苏州快三开奖号| www.50047.cc-99彩票平台送19| www.87756.cc-怎么辨别真假彩票站| www.10624.com-胜负彩历史开奖数据| www.874696.com-快三半顺图片| www.098965.com-中福福彩下载| www.e16.club-自带计划的彩票软件| www.142232.com-8彩网公司-| www.259112.com-体彩大乐透模拟摇奖| www.594728.com-福彩3d直播怎么看| www.961584.com-福彩快三官方网下载| www.36lk.com-七星彩割码表| www.60080.com-黑彩快3-| www.394730.com-彩虹代刷app生成| www.500522.com-6288彩票ios| www.532450.com-临沂福彩中心电话| www.966718.com-宝马彩票软件| www.37822.cc-万福彩票app下载| www.024643.com-全国福彩积分| www.160357.com-云彩店app-| www.062498.com-购彩网真假-|