基于jquery fullPage实现搜狐快站页面切换效果



38 150 51



特效描述:基于jquery fullPage实现 搜狐快站 页面切换效果,基于jquery fullPage实现搜狐快站页面切换效果

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/jquery.fullPage.css">

2. 引入JS

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui-1.10.3.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

3. HTML代码

<div id="side">
	<div class="inner">
		<div class="hgroup">
			<h1><a href="http://51qianduan.com/">搜狐快站</a></h1>
			<h2>专业的移动建站平台</h2>
		</div>
		<a class="start" href="http://51qianduan.com/">开始建站</a>
	</div>
	<ul id="menu">
		<li class="active" data-menuanchor="page1"><a class="a1" href="#page1" title="快速创建移动站点">快速创建移动站点</a></li>
		<li data-menuanchor="page2"><a class="a2" href="#page2" title="丰富的模板">丰富的模板</a></li>
		<li data-menuanchor="page3"><a class="a3" href="#page3" title="强大的功能组件">强大的功能组件</a></li>
		<li data-menuanchor="page4"><a class="a4" href="#page4" title="多种屏幕预览">多种屏幕预览</a></li>
		<li data-menuanchor="page5"><a class="a5" href="#page5" title="全网高速访问">全网高速访问</a></li>
	</ul>
</div>
<div class="section">
	<div class="imgbox">
		<img src="images/1.jpg" alt="快速创建移动站点">
	</div>
</div>
<div class="section">
	<div class="imgbox">
		<img src="images/2.jpg" alt="丰富的模板">
	</div>
</div>
<div class="section">
	<div class="imgbox">
		<img src="images/3.jpg" alt="强大的功能组件">
	</div>
</div>
<div class="section">
	<div class="imgbox">
		<img src="images/4.jpg" alt="多种屏幕预览">
	</div>
</div>
<div class="section">
	<div class="imgbox">
		<img src="images/5.jpg" alt="全网高速访问">
	</div>
</div>
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 导航切换 菜单切换 滑动选项卡 滑动切换 全屏切换 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到