用fullpage.js实现视觉滚动效果

1.Html页面

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <title>使用fullpage实现视觉滚动效果</title>

    <script type="text/javascript" src="js/fullPage.min.js"></script>

    <link href="css/index.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery.1.8.1.js"></script>

</head>

<body>

    <div id="pageContain">

        <div class="page page1 current" id="page1">

            <img class="imgStyle" src="img/p16.jpg">

            <div class="contain pa section">

                <div class="title1">第一屏</div>

                <a id="transparent_div1" style="position:absolute;text-align:center;bottom:0px;width: 500px;left:50%;margin-left: -250px;"><img  style="width:28px;height:36px;z-index:5;" src="img/arrow_down.png"></a>

            </div>

        </div>

        <div class="page page2" id="page2">

            <img class="imgStyle" src="img/p2.jpg">

            <div class="contain pa section">

                <div class="section_title">第二屏</div>

            </div>

        </div>

        <div class="page page3" id="page3">

            <img class="imgStyle" src="img/p4.jpg">

            <div class="contain pa section">

                <div class="section_title">第三屏</div>

                <!-- <div class="slide">第三屏的第一屏</div>

                <div class="slide">第三屏的第二屏</div>

                <div class="slide">第三屏的第三屏</div>

                <div class="slide">第三屏的第四屏</div>

                <ul id="navBar1">

                    <li></li>

                    <li></li>

                    <li></li>

                    <li></li>

                </ul> -->

            </div>

        </div>

        <div class="page page4" id="page4">

            <img class="imgStyle" src="img/p5.jpg">

            <div class="contain pa section">

                <div class="section_title">第四屏</div>

            </div>

        </div>

        <div class="page page5" id="page5">

            <img class="imgStyle" src="img/p8.jpg">

            <div class="contain pa section">

                <div class="section_title">第五屏</div>

            </div>

        </div>

        <div class="page page6" id="page6">

            <div class="contain pa section">

                <div class="section_title">第六屏</div>

            </div>

        </div>

    </div>

    <ul id="navBar">

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

    <script type="text/javascript">

        var runPage;

        runPage = new FullPage({

            id: 'pageContain',

            slideTime: 800,

            effect: {

                transform: {

                    translate: 'Y'

                },

                opacity: [0, 1]

            },

            mode: 'wheel, touch, nav:navBar',

            easing: 'ease',

            scrollDelay:400

        });

        $('#transparent_div1').on('click', function(){

            runPage.next();

        });

        window.onload=function(){

            $('#transparent_div1').css({

                'opacity': 0.5,

                'display': 'block'

            }).animate({

                "opacity": 1

            }, 2000);

        }

        setInterval(function(){

            $('#transparent_div1').animate({'bottom':'25px'},200).animate({'bottom':'5px'},200).animate({'bottom':'15px'},200);

        },600);

        //pageup pagedown控制滚动

        document.onkeydown=function(event){

            var e = event || window.event || arguments.callee.caller.arguments[0];

            if(e && e.keyCode==38){

                runPage.prev();

            }

            if(e && e.keyCode==40 ){

                runPage.next();

            }

        };

    </script>

</body>

</html>

效果图

源代码地址：http://files.cnblogs.com/files/gzx618/fullPage.zip

jquery实现视觉滚动--fullpage的更多相关文章

  1. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  2. 精心挑选10款优秀的 jQuery 图片左右滚动插件

    在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...

  3. 【jQuery】scroll 滚动到顶部

    Jquery 实现页面滚动到顶端 $(document).ready(function () { // 滚动窗口来判断按钮显示或隐藏 $(window).scroll(function () { // ...

  4. jQuery BreakingNews 间歇滚动

    BreakingNews 是一款基于jQuery的间歇滚动插件.它可以设置标题.标题颜色.标题背景颜色.链接颜色.字体大小.边框.宽度.自动滚动.间歇时间等等,同时它还好提供两种过度方式--淡入淡出( ...

  5. Infinite Scroll - jQuery & WP 无限滚动插件

    无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款  ...

  6. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jquery文字左右滚动

    实现jquery文字左右滚动 <div class="fl">中奖名单:</div> <div class="scrollText" ...

  8. jQuery图片无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jQuery.hhLRSlider 左右滚动图片插件

    /**  * jQuery.hhLRSlider 左右滚动图片插件  * User: huanhuan  * QQ: 651471385  * Email: th.wanghuan@gmail.com ...

随机推荐

  1. JVM自动内存管理学习笔记

    对于使用 C.C++ 的程序员来说,在内存管理领域,他们既是拥有最高权力的皇帝又是从事最基础工作的劳动人民——拥有每一个对象的“所有权”,又担负着每一个对象生命开始到终结的维护责任.对于 Java 程 ...

  2. oc-02-NSLog使用

    #import <Foundation/Foundation.h> /* NSLog() : C语言中的 printf的增强版 作用: 向控制台输出打印数据. 增强的地方 : 打印时间 , ...

  3. mysql 重要维护工具 图解

        下载地址: http://maatkit.org/get/mk-query-digest更多信息: http://maatkit.org/ | http://code.google.com/p ...

  4. String StringBuilder以及StringBuffer

    例一:[看了威哥视频,下面更好理解] package sunjava; public class String_test { public static void main(String[] args ...

  5. C语言第二节概述

    学前提醒 其实iOS开发就是开发iPhone\iPad上的软件,而要想开发一款软件,首先要学习程序设计语言 iOS开发需要学习的主要程序设计语言有:C语言.C++.Objective-C,其中C++. ...

  6. Android（java）学习笔记99：android的短信发送器研究

    1.第一种可以调用系统内部的短信程序. 之前我曾经出现过一个bug就是报错: android.content.ActivityNotFoundException: No Activity found ...

  7. PHP读书笔记（4）-运算符

    什么是运算符 什么是运算符?运算符是告诉PHP做相关运算的标识符号.例如,你需要计算123乘以456等于多少,这时候就需要一个符号,告诉服务器,你需要做乘法运算. PHP中的运算符有哪些?PHP运算符 ...

  8. Linux下的权限掩码umask

    权限掩码umask 我们都知道在linux下创建一个文件或者目录之后是可以通过chmod等命令进行权限设置,来达到给当前用户.用户组用户以及其他用户分配不同的访问权限.那么,我们新创建的目录和文件本身 ...

  9. linux-搜索

    grep显示文件中的匹配行     grep  参数  字符串  文件名 -c 输出匹配的行数 -v输出不匹配行 不加参数  :输出匹配的行 经常和管道符一起使用 eg:ps -ef|grep tom ...

  10. Hive中自定义函数

    Hive的自定义的函数的步骤: 1°.自定义UDF extends org.apache.hadoop.hive.ql.exec.UDF 2°.需要实现evaluate函数,evaluate函数支持重 ...