关于响应式页面

原来总是在想响应式布局效果怎么实现的，然后今天研究了一下，查看一些响应式网站的源码，总结下收获

关键代码

方法一

$(function(){
        //遍历你想找的元素
        $('').each(function () {
        //offset()获取匹配元素在当前视口的相对偏移,返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效;
        //获取当前视角位移高度
        var oftop = $(this).offset().top;
        //scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置;
        //获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
        var wintop = $(window).scrollTop();
        //获取窗口高度
        var yScroll = $(window).height();
        //当前可见距离<当前视角位移高度+窗口高度
        //也就是说到这个元素时开始执行,例如：加个动画啥的;
        if (oftop < wintop + yScroll) {
            $(this).addClass("animated fadeInDown");
        }
    })
    })

方法二

只是举个例子,怎么用就看你的喽

//滚动条垂直位置>=1600时，换一张图，反之变为原图
$(window).scroll(function(){
        if($(window).scrollTop() >=1600){
                    $('.imgfix').attr('src','images/001.jpg');
                }else{
                    $('.imgfix').attr('src','images/002.png');
                    }
    })

深入了解触发事件

扩展知识

推荐个Animate.css动画库

CSS3动画库

tips:博主昨天熬到3点，早晨7点被楼上装修房子的吵醒啦！ (｡˘•ε•˘｡)