瀑布流代码，页面滚动时加载图片的网页特效

2024-09-05 12:18:29

字体：大中小

来源：转载

供稿：网友

页面滚动图片加载特效，就像瀑布流一样，把滚动条拖至下面的时候，图片才开始加载，在JS代码里设置了循环函数，可以无限制添下去，不过也不要太多哦，太多的话用户会受不了的，呵呵。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>页面滚动图片加载</title> <style> body{text-align:center;}.list{margin-bottom:40px;}</style> </head> <body> <div>     <div>         <h1>聂微东-页面滚动图片加载</h1>           <div id="content"> 			<script type="text/javascript">			    var main = "";			    for (var i = 1; i < 21; i ++) {			        main += '<div class="list"><img class="scrollLoading" xSrc="http://www.codefans.net/jscss/demoimg/wall'%20+%20i%20+%20'.jpg" src="http://images.cnblogs.com/cnblogs_com/Darren_code/302725/o_pixel.gif" width="200" height="250" style="background:url(jscss/demoimg/201211/o_108.gif) no-repeat center;" /><br />图片' + i + '</div>';			    }			    document.getElementById("content").innerHTML = main;			</script>         </div>     </div> </div> <script type="text/javascript">    var scrollLoad = (function (options) {        var defaults = (arguments.length == 0) ? { src: 'xSrc', time: 300} : { src: options.src || 'xSrc', time: options.time ||300};        var camelize = function (s) {            return s.replace(/-(/w)/g, function (strMatch, p1) {                return p1.toUpperCase();            });        };        this.getStyle = function (element, property) {            if (arguments.length != 2) return false;            var value = element.style[camelize(property)];            if (!value) {                if (document.defaultView && document.defaultView.getComputedStyle) {                    var css = document.defaultView.getComputedStyle(element, null);                    value = css ? css.getPropertyValue(property) : null;                } else if (element.currentStyle) {                    value = element.currentStyle[camelize(property)];                }            }            return value == 'auto' ? '' : value;        };        var _init = function () {            var offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,                offsetWindow = offsetPage + Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight),                docImg = document.images,                _len = docImg.length;            if (!_len) return false;            for (var i = 0; i < _len; i++) {                var attrSrc = docImg[i].getAttribute(defaults.src),                    o = docImg[i], tag = o.nodeName.toLowerCase();                if (o) {                    postPage = o.getBoundingClientRect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop; postWindow = postPage + Number(this.getStyle(o, 'height').replace('px', ''));                    if ((postPage > offsetPage && postPage < offsetWindow) || (postWindow > offsetPage && postWindow < offsetWindow)) {                        if (tag === "img" && attrSrc !== null) {                            o.setAttribute("src", attrSrc);                        }                        o = null;                    }                }            };            window.onscroll = function () {                setTimeout(function () {                    _init();                }, defaults.time);            }        };        return _init();    });    scrollLoad();</script> </body> </html>

上一篇：阻止右键菜单（阻止默认事件）

下一篇：JS模拟酷狗音乐播放器的关闭特效