jquery fullPage.js制作搜狐快站页面效果

制作方法

1、HTML
左边放 logo 及菜单，右边放图片。

<div id=”side”>
<div>
<div>
<h1><a href=”###”>搜狐快站</a></h1>
<h2>专业的移动建站平台</h2>
</div>
<a href=”###”>开始建站</a>
</div>
<ul id=”menu”>
<li data-menuanchor=”page1″>
<a href=”#page1″ title=”快速创建移动站点”>快速创建移动站点</a>
</li>
<li data-menuanchor=”page2″>
<a href=”#page2″ title=”丰富的模板”>丰富的模板</a>
</li>
<li data-menuanchor=”page3″>
<a href=”#page3″ href=”#page3″ title=”强大的功能组件”>强大的功能组件</a>
</li>
<li data-menuanchor=”page4″>
<a href=”#page4″ href=”#page4″ title=”多种屏幕预览”>多种屏幕预览</a>
</li>
<li data-menuanchor=”page5″>
<a href=”#page5″ title=”全网告诉访问”>全网告诉访问</a>
</li>
</ul>
</div>

<div>
<div>
<img src=”images/img1.png” alt=”快速创建移动站点”>
</div>
</div>
<div>
<div>
<img src=”images/img2.png” alt=”丰富的模板”>
</div>
</div>
<div>
<div>
<img src=”images/img3.png” alt=”强大的功能组件”>
</div>
</div>
<div>
<div>
<img src=”images/img4.png” alt=”多种屏幕预览”>
</div>
</div>
<div>
<div>
<img src=”images/img5.png” alt=”全网告诉访问”>
</div>
</div>

2、CSS

我们用 position:fixed 固定左栏、logo 以及菜单，并且给菜单加上背景图片。

#side { position: fixed; left: 0; top: 0; z-index: 10; width: 300px; height: 100%; background-image: url(http://s0.zhan.sohu.com/images/df-side.png);}
.inner { position: absolute; left: 50%; top: 50%; width: 226px; margin: -112px 0 0 -113px;}
.hgroup { width: 226px; height: 81px; margin: 0 auto; text-indent: -9999px; background-image: url(http://s0.zhan.sohu.com/images/df-logo.png);}
.start { display: block; width: 186px; height: 56px; margin: 66px auto 0; text-indent: -9999px; overflow: hidden; background-image: url(http://s0.zhan.sohu.com/images/df-start.png);}
#menu { position: absolute; right: -20px; top: 50%; width: 40px; margin-top: -170px; padding: 0; list-style-type: none;}
#menu li { float: left;}
#menu a { display: block; width: 28px; height: 28px; margin: 20px 6px; border-radius: 14px; text-indent: -9999px; overflow: hidden; background-color: #a0afb9; background-position: 50%; background-repeat: no-repeat;}
#menu .a1 { background-image: url(http://s0.zhan.sohu.com/images/df-01.png);}
#menu .a2 { background-image: url(http://s0.zhan.sohu.com/images/df-02.png);}
#menu .a3 { background-image: url(http://s0.zhan.sohu.com/images/df-03.png);}
#menu .a4 { background-image: url(http://s0.zhan.sohu.com/images/df-04.png);}
#menu .a5 { background-image: url(http://s0.zhan.sohu.com/images/df-05.png);}
#menu a:hover, #menu .active a { margin: 14px 0; border: 6px solid #fff; box-shadow: 1px 1px 3px 1px #b4d7ed; border-radius: 20px; background-color: #239ae6;}
.section { margin-left: 300px; text-align: center; font: 50px “Microsoft Yahei”; color: #fff;}
.section .imgbox { margin-left: 300px;}
.section img { position: relative; left: -300px; display: block; margin: 0 auto;}

3、JavaScript

你了解 fullPage.js 的话，本例中的 JavaScript 就很简单了，设置一个背景颜色，绑定锚链接和菜单就可以了。

$(document).ready(function() {
$.fn.fullpage({
slidesColor: [‘#fff’, ‘#fff’, ‘#fff’, ‘#fff’, ‘#fff’],
anchors: [‘page1’, ‘page2’, ‘page3’, ‘page4’, ‘page5’],
menu: ‘#menu’
});
});

演示地址：http://www.viphper.com/demo/01_viphper.com_fullpage/index.html

[download id=”420″ template=”image”]