2015-4-23 bav总结

(function() {
    //动画
    function do1() {    //设置var变量 方便调用，减少页面重复调用的负担。
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop,
        screenHeight = window.screen.availHeight, //被卷去高度，屏幕可用工作区高度。
        page1 = $(‘#1’), //获取1 属性
        page2 = $(‘#2’), //获取2 属性
        page1Top = page1.offset().top, //获取第二版page1 高度
        page2Top = page2.offset().top; //获取第三版page2 属性
                if(scrollTop > page1Top - screenHeight * 0.5 && scrollTop < page1Top + screenHeight * 0.5){
            //当被卷去高度大于（ page1高度 – 当前可用工作区高度的一半）且小于page1高度+当前可用工作区高度一半时  添加动画效果。
            page1.find(‘li’).addClass(‘bd-bounceInUp’); //搜索所有段落中的后代 li 元素，并将添加动画效果 bd-bounceInUp。
        }
        if(scrollTop > page2Top - screenHeight / 2){
            //第二页动画
            var liClass= [“bd-1”,   //创建数组liClass,保存动画名称。
            "bd-2",
            "bd-3",
            "bd-4",
            "bd-5",
            "bd-6",
            "bd-7",
            "bd-8",
            "bd-9",
            "bd-10"];
            page2.find(‘li’).each(function(i){   //为每个li添加函数。I从0开始叠加
                $(this).addClass(liClass[i]);
            });
            $(‘#p’).addClass(liClass[9]); //    id为iso的元素添加10动画        
        }
    }
})();

<script>
       $(document).ready(function(){   //在文档加载后激活函数：
          //动画
        $(window).on(“scroll”, function() {//当用户滚动指定的元素时，会发生 scroll 事件。
           do1();
        });
        do1();</script>