jQuery页面滚动监听事件及高级效果插件

1. One Page scroll （只适用于上下焦点图）
http://www.thepetedesign.com/demos/onepage_scroll_demo.html

2. Scrolld（更不好用）
https://github.com/charliegeiger89/Scrolld.js#readme

3. Animate Scroll（参数太少，不好用）
https://github.com/ramswaroop/animatescroll.js#readme

归纳地址：
http://udn.yyuap.com/thread-68533-1-1.html

onepage-scroll

demo.html

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>onpage-scroll</title>

    <link rel="stylesheet" href="onepage-scroll.css">

    <link rel="stylesheet" href="demo.css">

    <script src="jquery-3.1.1.min.js"></script>

    <script src="jquery.onepage-scroll.min.js"></script>

</head>

<body>

<div class="wrapper">

    <div class="main onepage-wrapper">

        <section class="section page1">

            <img src="phones.png" alt="phones">

        </section>

        <section class="section page2">

            <img src="back-phone.png" alt="back-phone">

        </section>

        <section class="section page3">

            <img src="tilted-phone.png" alt="tiled-phone">

        </section>

    </div>

</div>

<script>

$(function () {

    $('.main section.page1 > img ').delay(300).animate({

        'right': '0'

    }, 300);

});

$('.main').onepage_scroll({

    sectionContainer: "section",

    easing: "ease",

    animationTime: 300,

    pagination:true,

    updateURL: false,

    beforeMove: function (index) {

        switch (index) {

            case 1:

                $('.main section.page1 > img ').css({

                    'right': '-300px'

                });

                break;

            case 2:

                $('.main section.page2 > img ').css({

                    'left': '-150px'

                });

                break;

            case 3:

                $('.main section.page3 > img ').css({

                    'left': '-150px'

                });

            default:

                break;

        }

    },

    afterMove: function (index) {

        switch (index) {

            case 1:

                $('.main section.page1 > img ').animate({

                    'right': '0'

                }, 300);

                break;

            case 2:

                $('.main section.page2 > img ').animate({

                    'left': '0'

                }, 300);

                break;

            case 3:

                $('.main section.page3 > img ').animate({

                    'left': '0'

                }, 300);

                break;

            default:

                break;

        }

    },

    loop: false,

    keyboard: true,

    responsiveFallback: false,

    direction: "vertical"

});

</script>

</body>

</html>

demo.css

html {

    height: 100%;

}

body {

    background: #e2e4e7;

    padding:;

    text-align: center;

    font-family: 'open sans';

    position: relative;

    margin:;

    height: 100%;

    -webkit-font-smoothing: antialiased;

}

.wrapper {

    height: 100% !important;

    margin: 0 auto;

     overflow: hidden;

}

.main {

    width: 100%;

    float: left;

    margin: 0 auto;

}

.onepage-wrapper {

    width: 100%;

    height: 100%;

    display: block;

}

.onepage-wrapper .section {

    width: 100%;

    height: 100%;

}

.main section.page1 {

    background: rgb(230, 217, 200);

}

.main section.page2 {

    background: #555557 no-repeat center;

}

.main section.page3 {

    background:  no-repeat;

}

.main section.page1 > img {

    position: absolute;

    right: -300px;

}

.main section.page2 > img {

    position: absolute;

    left: -150px;

}

.main section.page3 > img {

    position: absolute;

    left: 156px;

}

项目地址：

https://github.com/liuqiuchen/onepage-scroll

jQuery页面滚动监听事件及高级效果插件的更多相关文章

  1. js和jquery实现页面滚动监听

    js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...

  2. jQuery的滚动监听

    jQuery的滚动监听 1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2.获取指定元素的页面位置: $(val).offs ...

  3. 避免jquery多次监听事件

    jQuery.event.dispatch 事件分发监听源码简单理解是将绑定的事件放入队列后进行监听,如果对一个事件多次绑定(on或者bind),事件会重复添加到队列等待jq监听,这样会导致很大资源消 ...

  4. jquery四种监听事件的区别

    最近找工作被问到了jquery有哪些事件监听,都有什么区别,忽然有点想不起来了... 然后上网上查看了相关的资料,总结一下,方便大家查看,也方便自己复习! 1.bind()方法: bind(type, ...

  5. jQuery实现滚动监听

    1.设计思路 1)获取窗口滚动高度: 2)获取附加导航栏: 3)获取导航栏下的所有li: 4)通过相同class获取所有监听元素:(此例中为jumbotron巨幕) 5)遍历所有监听元素,若当前元素距 ...

  6. jQuery实现导航监听事件

    导航html如下 <div class="main_nav"> <a class="nav_01 active_01" href=" ...

  7. html页面监听事件

    今天有个需求,类似以下: <div id="a"> <input name="yinzhangfenlei" id="yinzhan ...

  8. 第二百四十四节，Bootstrap下拉菜单和滚动监听插件

    Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...

  9. amaze ui 滚动监听

    引入   此框架的css  js    前提还要有jquery http://amazeui.org/javascript/scrollspy 然后看这个链接里的各种动画 运用方法就是  在你想要有动 ...

随机推荐

  1. css小tip

    1. <input>标签的默认样式 当在页面中添加一个input标签,当点击输入框时会有一个外边框包裹着,可以使用 : input { outline: none} 去除点击时产生的外边框 ...

  2. AsyncTask的缺陷以及解决方法

    1.AsyncTask常用于进行耗时操作,完成后更新主线程的UI. 2.缺陷:AsyncTask中维护着一个长度为128的线程池,同时可以执行5个工作线程,还有一个缓冲队列,当线程池中已有128个线程 ...

  3. 【随笔】mOnOwall添加端口映射

    mOnOwall是一个完整的嵌入防火墙软件包,当与一台嵌入个人电脑一起使用时,在免费使用自由软件的基础上,提供具备商业防火墙所有重要特性(包括易用). 这里通过配置mOnOwall的端口设置映射功能, ...

  4. 【实(dou)力(bi)首(mai)发(meng)】第四次CCF软件能力认证题解

    这次的题总体上相对前三次偏简单.由于实力有限,就分析前四题.     试题编号:    201503-1 试题名称:    图像旋转 时间限制:    5.0s 内存限制:    256.0MB 问题 ...

  5. 让IE8支持HTML5及canvas功能！chart.js图表绘制工具库IE8上兼容方案

    第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

  6. iOS.ReactNative-4-react-native-command-line-tool

    Command line tool: react-native 1. react-native 是一个命令行工具 1.1 react-native简介 运行以下命令: ls -lt `which re ...

  7. RNN and LSTM saliency Predection Scene Label

    http://handong1587.github.io/deep_learning/2015/10/09/rnn-and-lstm.html  //RNN and LSTM http://hando ...

  8. windows防火墙打不开的处理办法

    一.防火墙配置出错 开始-->运行-->gpedit.msc 这时,打开了组策略 在左面分级展开 计算机配置-->管理模板-->网络-->网络连接-->Window ...

  9. ycsb使用方法

    ycsb本身相当于客户端,不断向服务端发送请求,同时记录下这些请求耗费的时间. 那么,必须要有一个服务端在某个端口监听. ycsb可以在workload里写入服务端的ip和端口,也可以在命令行里写上. ...

  10. cocos2d-x之内存管理(4)

    c++的内存管理一直以来都是个问题,也有多种实现方案,比如智能指针,使用引用计数等,cocos2d-x也需要涉及到内存的管理. cocos2d-x是如何管理内存的呢? cocos2d-x的内存管理主要 ...