用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. Keeplived 配制图解

    http://blog.csdn.net/tantexian/article/details/50056229

  2. npm获取配置,设置代理

    npm获取配置有6种方式,优先级由高到底. 命令行参数. --proxy http://server:port即将proxy的值设为http://server:port. 环境变量. 以npm_con ...

  3. 把json格式对象转成可提交字符串格式,会过滤掉函数 {a: {b: 3}, b: [1], c: "d"} -> a.b=3&b[0]=1&c=d

    var json = { name: "任务名称" , scoreRule: "", score: "", // 如果规则表达式不为空,则默 ...

  4. Spark_Api_图解

  5. XGPush集成（信鸽集成）

    #import "AppDelegate.h" #import "XGPush.h" #import "XGSetting.h" #defi ...

  6. 线程2 NSOperation 抽像类的使用

    // // ZYOperationViewController.h // Thread // // Created by yejiong on 14 // // ZYOperation.h // Th ...

  7. hadoop学习记录（三）HBase基本概念

    这一次开始学习HBase数据库. 我用的是VMWare + ubuntu16.04 +Hbase1.1.5 +hadoop2.6.0的组合. 经过亲自安装验证,版本间没有发生冲突,可以进行学习和开发. ...

  8. MAC下查看端口占用并杀死进程

    Eclipse在Run on Server时,Tomcat是开启的,但是报错,显示8080.8005和8009端口被占用 终端输入 查看所有开启的端口 sudo lsof -i -P | grep - ...

  9. 给jdk写注释系列之jdk1.6容器(8)-TreeSet&NavigableMap&NavigableSet源码解析

    TreeSet是一个有序的Set集合. 既然是有序,那么它是靠什么来维持顺序的呢,回忆一下TreeMap中是怎么比较两个key大小的,是通过一个比较器Comparator对不对,不过遗憾的是,今天仍然 ...

  10. HDU 1016 Prime Ring Problem (DFS)

    Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...