[其他代码] jQuery全屏滚动插件fullPage.js

创建: 禹天 发布:2014-10-14 10:46
5747 次浏览 3 位用户参与讨论
资源详情
以下发布的作品,版权归属原作者插件之家共同所有。
演示地址: http://vip.chajian110.com/js/201/
插件之家站长网温馨提示 1、为保证您的问题能够及时解决,若有任何疑问,请直接至 互动问答区 提问,切勿在此帖回复提问。
2、安装插件后,请记得启用及设置。
3、安装新风格模板或更新模板后,请及时更新缓存及CSS缓存。
如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js。

fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:

支持鼠标滚动
支持前进后退和键盘控制
多个回调函数
支持手机、平板触摸事件
支持 CSS3 动画
支持窗口缩放
窗口缩放时自动调整
兼容性

fullPage.js 支持 IE8+ 及其他现代浏览器。
使用方法

1、引入文件

       
<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

2、HTML

       
<div class="section">第一屏</div>
<div class="section">第二屏</div>
fullPage.js.png
<div class="section">
    <div class="slide">第三屏的第一屏</div>
    <div class="slide">第三屏的第二屏</div>
    <div class="slide">第三屏的第三屏</div>
    <div class="slide">第三屏的第四屏</div>
</div>
<div class="section">第四屏</div>

3、JavaScript

       
$(document).ready(function() {
    $.fn.fullpage({
        slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
        anchors: ['page1', 'page2', 'page3', 'page4']
    });
});

经测试,最好至少有 anchors 这个参数,否则在火狐浏览器中,第一次滚动会直接滚到底部。

fullPage.js.zip (3.02 MB, 下载次数: 234)
参与讨论的有 3 人
Ask 2014-10-14 11:35:04 显示全部楼层
效果灰常不错啊,楼主的头像真是淫荡啊

点评

哈哈哈!!你懂的  详情 回复 发表于 2014-10-14 14:56
哈哈哈!!你懂的  详情 回复 发表于 2014-10-14 14:56
禹天 2014-10-14 14:56:15 显示全部楼层
Ask 发表于 2014-10-14 11:35
效果灰常不错啊,楼主的头像真是淫荡啊

哈哈哈!!你懂的
禹天 2014-10-14 14:56:16 显示全部楼层
Ask 发表于 2014-10-14 11:35
效果灰常不错啊,楼主的头像真是淫荡啊

哈哈哈!!你懂的
添加一条新回复

本版积分规则

hi,欢迎来到插件之家 - 禹天分享社区

热门商讯
赞助伙伴
快速回复 返回顶部 返回列表