HTML
<img _src="http://4493bz.1985t.com/uploads/allimg/140710/1-140G0161612.jpg" alt="" /> <img _src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33R6.jpg" alt="" /> <img _src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33242.jpg" alt="" /> <img _src="http://img.bizhi.sogou.com/images/2014/12/10/997251.jpg" alt="" /> <img _src="http://4493bz.1985t.com/uploads/allimg/140710/1-140G0161612.jpg" alt="" /> <img _src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33R6.jpg" alt="" /> <img _src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33242.jpg" alt="" /> <img _src="http://img.bizhi.sogou.com/images/2014/12/10/997251.jpg" alt="" /> <img _src="http://4493bz.1985t.com/uploads/allimg/140710/1-140G0161612.jpg" alt="" /> <img _src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33R6.jpg" alt="" /> <img _src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33242.jpg" alt="" /> <img _src="http://img.bizhi.sogou.com/images/2014/12/10/997251.jpg" alt="" />
说白了就是一大堆图片
给个样式
img { width: 300px; height: 300px; float: left; margin: 10px; border: #000 1px solid; }
最后是重点
JS
function getPos(obj) { var l = 0; var t = 0; console.log(obj) while(obj) { l += obj.offsetLeft; //元素距左窗口距离 t += obj.offsetTop; //元素距上窗口距离 obj = obj.offsetParent; //返回元素的有定位属性的父节点 } return { left: l, top: t }; } window.onload = window.onscroll = window.onresize = function() { var aImg = document.getElementsByTagName('img'); var oScroll = document.documentElement.scrollTop || document.body.scrollTop; var clientH = document.documentElement.clientHeight; for(var i = 0; i < aImg.length; i++) { var imgTop = getPos(aImg[i]).top; if(oScroll + clientH >= imgTop) { aImg[i].src = aImg[i].getAttribute('_src'); } } }
这样就大功告成了