用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. iOS 2D绘图详解（Quartz 2D）之概述

    前言:最近在研究自定义控件,由于想要彻底的定制控件的视图还是要继承UIView,虽然对CALayer及其子类很熟练,但是对Quartz 2D这个强大的框架仍然概念模棱两可.于是,决定学习下,暂定7篇文 ...

  2. sysbench 安装 原创

    1.下载sysbench version 0.5 https://github.com/akopytov/sysbench 2. [root@server1 sysbench-0.5]# pwd/ro ...

  3. css 之position用法详解

    css  之position用法详解: http://www.jb51.net/web/77495.html

  4. 使用Java编写并运行Spark应用程序

    我们首先提出这样一个简单的需求: 现在要分析某网站的访问日志信息,统计来自不同IP的用户访问的次数,从而通过Geo信息来获得来访用户所在国家地区分布状况.这里我拿我网站的日志记录行示例,如下所示: 1 ...

  5. Eclipse的java代码出错：The import org.apache cannot be resolved

    Eclipse中,折腾java代码. 把之前在android中的代码拿过来使用. 结果出现The import org.apache cannot be resolved的错误: [解决过程] 1.这 ...

  6. BootStrap2学习日记4---常用标签与样式

    <small>:常常和h1标签一起搭配使用 如<h1>标题<small>小标题</small></h1> <abbr>:abbr ...

  7. Android（java）学习笔记108：通过反射获取私有构造方法并且使用

    反射获取私有构造方法并且使用: 1.获取字节码文件.class对象:          Class c = Class.forName("cn.itcast_01.Person") ...

  8. jar包冲突解决方法

    import java.io.File;import java.io.IOException;import java.util.ArrayList;import java.util.Enumerati ...

  9. Java Bean validation specification...

    http://www.ibm.com/developerworks/cn/java/j-lo-beanvalid/index.html

  10. 搭建yum源服务器

    在生产环境中,受到网络环境的影响,服务器可能带宽有限,连外网速度较慢或者局域网内的某些机器由于安全的限制,本身就不允许和外网和任何的连接.而这时候现在通过yum安装包或update包时就是一件比较麻烦 ...