QQ登录

只需一步,快速开始

插件之家 - 禹天分享社区

查看: 5563|回复: 3

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

[复制链接]
发表于 2014-10-14 10:46:32 | 显示全部楼层 |阅读模式
资源详情
以下发布的作品,版权归属原作者插件之家共同所有。
演示地址: 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, 下载次数: 153)
发表于 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
效果灰常不错啊,楼主的头像真是淫荡啊

哈哈哈!!你懂的
您需要登录后才可以回帖 登录 | 注册

本版积分规则

关于我们|小黑屋|手机版|Archiver| 插件之家 ( 京ICP备1201351 京公网 安备11011202001379号 ) ||

GMT+8, 2018-5-21 15:13 , Processed in 0.387107 second(s), 31 queries .

Powered by Discuz! X3.4

© 2015-2016 Comsenz Inc.

快速回复 返回顶部 返回列表