关于响应式页面

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

关键代码

方法一

$(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点被楼上装修房子的吵醒啦！ (｡˘•ε•˘｡)