用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. 在Web上调用Ocx控件

    原文:http://blog.csdn.net/goodadult2012/article/details/6343369 在HTML页面中使用ActiveX控件包含三个基本操作:将控件放入HTML中 ...

  2. [IOS]自定义长触屏事件

    写一个Demo来自定义一个长触屏事件,自定义长按手势. 实现步骤: 1.创建一个自定义手势类,命名为LongPressGestureRecognizer,在创建的时候继承UIGestureRecogn ...

  3. php中常用设置

    设置SESSION的生命周期 今天我所要想解决的问题,简单来说,就是设置SESSION的生命周期问题,其实问题是很简单了,只是不知道为什么,我用session_cache_expire(12*60); ...

  4. uint8_t / uint16_t / uint32_t /uint64_t 是什么数据类型（转）

    在nesc的代码中,你会看到很多你不认识的数据类型,比如uint8_t等.咋一看, 好像是个新的数据类型,不过C语言(nesc是C的扩展)里面好像没有这种数据类型啊!怎么又是u又是_t的?很多人有这样 ...

  5. 琐碎-hadoop2.2.0目录结构

    之前了解了一下0.20.2和1.1.0.以后现在主流肯定是2.x吧,包含了之前没有的yarn bin Hadoop最基本的管理脚本和使用脚本,这些脚本是sbin目录下管理脚本的基础实现,用户可以用这些 ...

  6. DataTable转换为Model实体对象

    记得在学校的时候,接触得最多的就是SqlHelper,每次在读取的时候不管是DataTable还是DataReader转换为实体对象的时候是最恼火的,因为要写很多代码,而且没有什么意义.后面接触到了反 ...

  7. MSSQL系统表常用操作

    1:获取当前数据库中的所有用户表 select Name from sysobjects where xtype='u' and status>=0 2:获取某一个表的所有字段 select n ...

  8. linux - 输入输出重定向 及 管道

    > 正确结果重定向 2> 错误结果重定向 &> 正确和错误全部重定向 >> 追加,其它同> 标准输出实际上就是显示器,比如我们使用cat命令打开一个文件,文 ...

  9. Linux 学习之路：read,array,declare

    一.read 键盘读取变量 用法:read -p  "PLS keyin your name:" -t 60 name -p :后面接提示符,-t 后面接可以等待的时间,其中nam ...

  10. PHP笔试题汇总

    1.抓取远程图片到本地,你会用什么函数? fsockopen, A 2.用最少的代码写一个求3值最大值的函数. function($a,$b,$c){* W0 z* u6 k+ e. L  a: }5 ...