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

2014年8月4日 飞飞 阅读(5.53K)

80

制作方法

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




注意:您需要在网站顶部 注册 后,才能下载资源

资源名称:01_viphper.com_fullpage.rar

(下载次数:516次)

提示:此资源由PHP学习网整理或原创,转载请注明。QQ群:66357155

未经允许不得转载:PHP学习网 » jquery fullPage.js制作搜狐快站页面效果
分享到:

相关推荐

评论抢沙发

要发表评论,您必须先

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

扫码关注微信公众号

扫描关注微信公众号