微信扫码登录 ×
vip素材 建站功能介绍tab图文布局
vip素材

建站功能介绍tab图文布局

收藏
建站功能介绍tab图文布局
jQuery基于css3属性制作建站小程序功能特点介绍,带索引按钮控制图文布局动画演示代码。这是一款简洁的产品特点图文tab切换布局。

使用方法:

1、head引入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="gongneng">
	<div class="gongneng_main" id="gongneng_main">
		<div class="Small_tedian_tit">建站小程序功能特点</div>
		<div class="gongneng_tab">
			<div class="gongneng_tabmin">
				<div class="gongneng_click cur"><i></i><b>1</b></div>
				<div class="gongneng_click"><i></i><b>2</b></div>
				<div class="gongneng_click"><i></i><b>3</b></div>
				<div class="gongneng_click"><i></i><b>4</b></div>
				<div class="gongneng_click"><i></i><b>5</b></div>
				<div class="gongneng_click"><i></i><b>6</b></div>
				<div class="gongneng_click"><i></i><b>7</b></div>
				<div class="gongneng_click"><i></i><b>8</b></div>

			</div>
		</div>
		<div class="conBox">
			<div class="gongneng_tabcon" style="display:block;">
				<div class="gongneng_left1 fadeInLeft">
					<img src="statics/images/web_point_img1.png" />
				</div>
				<div class="gongneng_right1">
					<b>01</b>
					<em>店铺风格随心换</em>
					<p>海量模板随心换</p>
					<p>更多插件模块随心搭配</p>
				</div>
			</div>
			<div class="gongneng_tabcon">
				<div class="gongneng_right2">
					<b>02</b>
					<em>应用插件功能强大</em>
					<p>拥有齐全的应用插件</p>
					<p>商城插件营销插件一应俱全</p>
				</div>
				<div class="gongneng_left2 fadeInRight">
					<img src="statics/images/web_point_img2.png" />
				</div>
			</div>
			<div class="gongneng_tabcon">
				<div class="gongneng_left3 fadeInLeft">
					<img src="statics/images/web_point_img3.png" />
				</div>
				<div class="gongneng_right3">
					<b>03</b>
					<em>无需开发,小程序一键生成</em>
					<p>针对时下火热的小程序,</p>
					<p>无需任何技术,一键打包生成,</p>
					<p>即用即走,集展示、互动、交易为一体,</p>
					<p>为您带来无尽流量</p>
				</div>
			</div>
			<div class="gongneng_tabcon">
				<div class="gongneng_right4">
					<b>04</b>
					<em>支持多页面,flex开发</em>
					<p>随时切换</p>
					<p>快速调用回到开始状态</p>
					<p>支持flex框架下的布局开发</p>

				</div>
				<div class="gongneng_left4 fadeInRight">
					<img src="statics/images/web_point_img4.png" />
				</div>
			</div>
			<div class="gongneng_tabcon">
				<div class="gongneng_left5 fadeInLeft">
					<img src="statics/images/web_point_img5.png" />
				</div>
				<div class="gongneng_right5">
					<b>05</b>
					<em>全平台统一管理</em>
					<p>告别冗杂的维护成本,</p>
					<p>统一管理你的网站与小程序</p>
				</div>
			</div>
			<div class="gongneng_tabcon">
				<div class="gongneng_right6">
					<b>06</b>
					<em>绑定多个小程序</em>
					<p>一个账号下可绑定5个小程序</p>
					<p>再也不用注册多个账号切换啦</p>
				</div>
				<div class="gongneng_left6 fadeInRight">
					<img src="statics/images/web_point_img6.jpg" />
				</div>
			</div>
			<div class="gongneng_tabcon">
				<div class="gongneng_left7 fadeInLeft">
					<img src="statics/images/web_point_img7.png" />
				</div>
				<div class="gongneng_right7">
					<b>07</b>
					<em>分销商城版</em>
					<p>快速建设分销渠道</p>
					<p>商家一键自动分账</p>
					<p>轻松补充优质货源</p>

				</div>
			</div>
			<div class="gongneng_tabcon">
				<div class="gongneng_right6">
					<b>08</b>
					<em>双平台在线发布</em>
					<p>微信小程序/百度小程序,两大小程</p>
					<p>序平台一键发布,全面获取流量</p>

				</div>
				<div class="gongneng_left8 fadeInRight">
					<img src="statics/images/web_point_img8.jpg" />
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	//tab切换
	$('.gongneng_tabmin div').hover(function(){
		var conBox = $("#gongneng_main").find('.conBox');
		$(this).addClass("cur").siblings('.cur').removeClass("cur");
		conBox.find(".gongneng_tabcon").eq($(this).index()).show().siblings(':visible').hide();				
	})
</script>

使用声明

1. 本站所有素材(未指定商用),仅限学习交流。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,请勿用于商业用途,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。
5. 如果素材损害你的权益请联系客服QQ:3264130392给予处理。

  • 软件 Dreamweaver
  • 格式 HTML
  • 作者 I想要
  • 上传时间 4年前
x
×
×

注册

QQ注册 立即下载 微信注册 立即下载

签到成功!

已连续签到1天,连续签到3天可获得50积分

知道了