使用fullPage美化你的网站

Published on:
Tags: js fullpage

这段时间逛网站，发现有一些网站的页面做的跟手机屏幕一样，大图片大字体铺满整个屏幕，还可以像手机一样通过鼠标上下左右滑动来切换不同的页面，让人感觉很炫很酷很炫。好奇心的驱使下找到了fullPage.js这个jquery插件，它可以让你轻松地制作漂亮的全屏滑动页面。

支持的浏览器

可以看到好东西都是不支持IE6的。

用法

  • fullPage.js使用非常简单，先在你的html页面里面加上fullPage的css和js文件，注意还需要包括jquery的js文件，而且要放在fullPage的js文件前面。
index.html
1
2
3
4
5
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript" src="jquery.fullPage.js"></script>
  • 然后在html里面定义一个div，id为fullpage，里面再嵌套div，class为section，代码示例如下，这是一个简单的全页滑动页面。
index.html
1
2
3
4
5
6
<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>
  • 最后在对fullPage对象进行初始化。
index.js
1
2
3
$(document).ready(function() {
    $('#fullpage').fullpage();
});

fullPage属性

这是一个比较复杂的fullPage初始化，可以看到fullPage可以设置很多的属性，比如menu(菜单)，设置为true则在屏幕右边会显示导航菜单，其他的属性说明可以参考fullPage的官方说明。

index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
$(document).ready(function() {
    $('#fullpage').fullpage({
        //Navigation
        menu: false,
        anchors:['firstSlide', 'secondSlide'],
        navigation: false,
        navigationPosition: 'right',
        navigationTooltips: ['firstSlide', 'secondSlide'],
        slidesNavigation: true,
        slidesNavPosition: 'bottom',

        //Scrolling
        css3: false,
        scrollingSpeed: 700,
        autoScrolling: true,
        scrollBar: false,
        easing: 'easeInQuart',
        easingcss3: 'ease',
        loopBottom: false,
        loopTop: false,
        loopHorizontal: true,
        continuousVertical: false,
        normalScrollElements: '#element1, .element2',
        scrollOverflow: false,
        touchSensitivity: 15,
        normalScrollElementTouchThreshold: 5,

        //Accessibility
        keyboardScrolling: true,
        animateAnchor: true,

        //Design
        verticalCentered: true,
        resize : true,
        sectionsColor : ['#ccc', '#fff'],
        paddingTop: '3em',
        paddingBottom: '10px',
        fixedElements: '#header, .footer',
        responsive: 0,

        //Custom selectors
        sectionSelector: '.section',
        slideSelector: '.slide',

        //events
        onLeave: function(index, nextIndex, direction){},
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
        onSlideLeave: function(anchorLink, index, slideIndex, direction){}
    });
});

参考示例

在fullPage的github工程里面，有一个example文件夹，主页面是demoPage.html，在浏览器打开它可以看到里面列举了19个fullPage的Demo，有上下翻页，左右翻页，嵌套视频等各种例子，如果想实现自己想要的效果，可以参照对应demo的html文件来进行修改。

赞赏

如果文章对您有所帮助，可以捐赠我喝杯咖啡😌，捐赠方式：

BTC 地址：3LYgSyf7ddMALwGWPQr3PY4wzjsTDdg1oV
ETH 地址：0x0C9b27c89A61aadb0aEC24CA8949910Cbf77Aa73
qrcode

文章已同步更新公众号，欢迎关注

qrcode

Comments