var animateBlock={
        isVisiable:function(el,wh,st,delta){
            delta=delta||200;
            //console.log($(el).offset().top,wh,st,delta)
            return $(el).offset().top<wh+st-delta;
        },
        animations:{
            band:function(wh,st){
                var $el=$("#band");
                if(animateBlock.isVisiable($el,wh,st)){
                    //background:time:0-500.o
                    //text:time:500-733.o.p:10px;
                    //menu:time:633-900.o.p:-10px;
                    $("#js-band-bg").animate({opacity:1},500);
                    $("#js-band-text").delay(500).animate({top:330,opacity:1},233);
                    $("#js-header").delay(633).animate({top:0,opacity:1},267);
                    delete animateBlock.animations.band;
                }
            },
            character:function(wh,st){
                var $el=$("#characters");
                if(animateBlock.isVisiable($el,wh,st)){
                    $el.find(".char-icon1").animate({top:50,opacity:1},333);
                    $el.find(".char-icon2").delay(200).animate({top:50,opacity:1},533);
                    $el.find(".char-icon3").delay(400).animate({top:50,opacity:1},733);

delete animateBlock.animations.character;
                }
            },
            intro1:function(wh,st){
                var $el=$("#intro1");
                if(animateBlock.isVisiable($el,wh,st)){
                    //console.log("trigger intro1 animate");
                    $el.find(".intro1-video").animate({
                        "bottom":0,
                        opacity:1
                    },500);
                    $el.find(".intro1-text").delay(167).animate({opacity:1},500);
                    $el.find(".intro1-star").delay(333).animate({opacity:1},333);
                    delete animateBlock.animations.intro1;
                }
            },
            intro2:function(wh,st){
                var $el=$("#intro2");
                if(animateBlock.isVisiable($el,wh,st)){
                    //console.log("trigger intro2 animate");
                    $el.find(".intro2-computer1").animate({
                        "top":-30,
                        opacity:1
                    },500);
                    $el.find(".intro2-computer2").delay(500).animate({
                        opacity:1
                    },167);
                    $el.find(".intro2-text").delay(167).animate({opacity:1},500);
                    delete animateBlock.animations.intro2;
                }
            },
            intro3:function(wh,st){
                var $el=$("#intro3");
                if(animateBlock.isVisiable($el,wh,st)){
                    //console.log("trigger intro3 animate");
                    $el.find(".intro3-calendar").animate({
                        "top":-31,
                        opacity:1
                    },333);
                    $el.find(".intro3-rockets").delay(233).animate({
                        "top":-46,
                        opacity:1
                    },267);
                    $el.find(".intro3-smoke").delay(333).animate({
                        "top":-31,
                        opacity:1
                    },334);
                    $el.find(".intro3-text").delay(167).animate({opacity:1},500);
                    delete animateBlock.animations.intro3;
                }
            },
            intro4:function(wh,st){
                var $el=$("#intro4");
                if(animateBlock.isVisiable($el,wh,st)){
                    //console.log("trigger intro4 animate");
                    $el.find(".intro4-hand").animate({
                        "top":-30,
                        opacity:1
                    },500);
                    $el.find(".intro4-icon").delay(333).animate({
                        opacity:1
                    },333);
                    $el.find(".intro4-text").delay(167).animate({opacity:1},500);
                    delete animateBlock.animations.intro4;
                }
            }
        }
    }

$(window).on("scroll",function(){
        var animations,
            name,
            winHeight=$(window).height(),
            scrollTop=$(window).scrollTop();

animations=animateBlock.animations;
        for(name in animations){
            animations[name](winHeight,scrollTop);
        }
    });
    if($(window).height()>500){
        $(document).trigger("scroll");
    }

scroll 事件绑定的更多相关文章

  1. 关于如何绑定Jquery 的scroll事件(兼容浏览器 Wookmark瀑布流插件)

    做一个随屏幕滚动的导航条时,发现一个问题: 火狐.谷歌.ie9正常,ie8.7.6页面滚动时,导航条没有反应. 代码如下: $(document).bind("scroll",fu ...

  2. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

  3. jQuery-1.9.1源码分析系列(十) 事件系统——事件绑定

    事件绑定的方式有很多种.使用了jQuery那么原来那种绑定方式(elem.click = function(){...})就不推荐了,原因? 最主要的一个原因是elem.click = fn这种方式只 ...

  4. JQuery实现click事件绑定与触发方法分析

    原生JS通过什么方法绑定click事件? 原生js有一下三种方法为DOM对象绑定click事件, 第一种,在html中添加 onclick属性,在此属性中添加要绑定的事件函数,如下, 这种方法为htm ...

  5. 关于scroll无法绑定的问题

    关于jQuery的scroll([[data],fn])事件, 概述是:当用户滚动指定的元素(元素包括:所有可滚动的元素和 window 对象)时,会触发该事件. 如绑定窗口对象: $(window) ...

  6. “如何稀释scroll事件”引出的问题

    背景:我在segmentfault提了个问题如何稀释onscroll事件,问题如下: 面试时问到这个问题,是这样的:    面试官问一个关于滚动到某个位置的时候出现一个顶部的导航栏,答完之后,她接着问 ...

  7. 事件绑定之.bind()

    .bind(eventType[,eventData],handler(eventObject)) 描述:为一个元素绑定一个事件处理程序,bind()绑定方法的时候元素必须已经存在. -eventTy ...

  8. jQuery的三种bind/One/Live/On事件绑定使用方法

    本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要的朋友参考下   今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQ ...

  9. JQuery的方便之处——宽高设置、坐标值和滚动条+事件绑定机制

    1.元素的宽高 可以通过css来进行设置,例如:$("元素").css({"宽度":"值","高度":"值&q ...

随机推荐

  1. Log4j2 配置笔记(Eclipse+maven+SpringMVC)

    Log4j2相关介绍可以百度看下,这里只注重配置Log4j2 能够马上跑起来: 1.pom.xml文件中添加Log4j2的相关Maven配置信息 <!-- log4j2 --> <d ...

  2. 【BZOJ】【1046】【HAOI2007】上升序列

    DP+贪心 啊……其实是个水题,想的复杂了 令f[i]表示以 i 为起始位置的最长上升子序列的长度,那么对于一个询问x,我们可以贪心地从前往后扫,如果f[i]>=x && a[i ...

  3. 【BZOJ】【1045/1465】【HAOI2008】糖果传递

    思路题/神奇的转化…… orz hzwer 或许这个思路可以从单行而非环形的递推中找到?(单行的时候,从左往右直接递推即可…… 感觉好神奇>_<脑残患者想不出…… P.S.话说在$n\le ...

  4. 【BZOJ】【2756】【SCOI2012】奇怪的游戏

    网络流-最大流 这题……建模部分先略过 这道题是会卡时限的T_T俺的Dinic被卡了,在此放几篇很棒的讲网络流算法的文章,至于大家耳熟能详的论文就不放了…… http://www.cppblog.co ...

  5. Leetcode#57 Insert Interval

    原题地址 遍历每个区间intervals[i]: 如果intervals[i]在newInterval的左边,且没有交集,把intervals[i]插入result 如果intervals[i]在ne ...

  6. 输出string vector到file

    #include <fstream> #include <iterator> #include <string> #include <vector> i ...

  7. 各大公司广泛使用的在线学习算法FTRL详解

    各大公司广泛使用的在线学习算法FTRL详解 现在做在线学习和CTR常常会用到逻辑回归( Logistic Regression),而传统的批量(batch)算法无法有效地处理超大规模的数据集和在线数据 ...

  8. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  9. maven mirror repository

    简单点来说,repository就是个仓库.maven里有两种仓库,本地仓库和远程仓库.远程仓库相当于公共的仓库,大家都能看到.本地仓库是你本地的一个山寨版,只有你看的到,主要起缓存作用.当你向仓库请 ...

  10. XHProf的安装和使用(PHP性能测试神器)

    XHProf是Facebook开发的性能调试工具,帮助我们的PHP程序性能调优,更加健壮.XHProf安装和使用方法将在本章讲解.XHProf是PHP的PECL扩展.没有XDeBug那些耗费资源,更加 ...