用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. Ubuntu下多服务器 Rsync同步镜像服务配置

    主服务器:192.168.5.13_ubuntu 从服务器:192.168.5.11_centos ================== 1> 在两台主机上分别安装rsync========== ...

  2. linux对外开放某个端口命令

    /sbin/iptables -I INPUT -p tcp --dport 80 -j ACCEPT /etc/rc.d/init.d/iptables save /etc/rc.d/init.d/ ...

  3. Ubuntu开机时出现&quot;没有正确安装GNOME电源管理器的默认配置

    1:在登录界面.按Ctrl+Alt+F1,进入控制台命令行模式 2:先输入username,回车,然后输入password,登录成功 3:输入df -h,这个命令是查看硬盘空间的.能够看一下.你的ho ...

  4. UNIX基础知识之时间值

    本篇博文内容摘自<UNIX环境高级编程>(第二版),仅作个人学习记录所用.关于本书可参考:http://www.apuebook.com/. 长期以来,UNIX系统一直使用两种不同的时间值 ...

  5. 1020. Tree Traversals (25)

    the problem is from pat,which website is http://pat.zju.edu.cn/contests/pat-a-practise/1020 and the ...

  6. Hidden Markov Model

    Markov Chain 马尔科夫链(Markov chain)是一个具有马氏性的随机过程,其时间和状态参数都是离散的.马尔科夫链可用于描述系统在状态空间中的各种状态之间的转移情况,其中下一个状态仅依 ...

  7. BloomFilter——读数学之美札记

    之前接触过bitmap,读吴军先生的数学之美,看到了一个更强大的数据结构,布隆过滤器(Bloomfilter),赶紧记下来吧,忘了怪可惜的. bitmap的使用是很有局限性的,往往只能用于海量数值型数 ...

  8. python multiprocess不能完全关闭socket的验证

    近日项目有原来的多线程升级成为多进程模型后,但出现了个问题,在持续运行一天左右系统处理能力开始变慢,并不时打印以下信息: too many opened files 修改ulimit中open fil ...

  9. KindEditor编辑器, 利用ajax动态切换编辑器内容

    // 后台成功返回数据后的js处理 KindEditor.remove('#content_id'); // 先移除之前创建的编辑器 var editor = KindEditor.create('# ...

  10. Delphi7使用ADO直接连接Excel读取数据

    我之前是连接成功的,现在不知道为什么怎样连都失败.最后才知道是Office版本的问题,office2007已经是基于xml的.和以前的不一样. Excel2003的连接字符串: 'Provider=M ...