瀑布流代碼，頁(yè)面滾動(dòng)時(shí)加載圖片的網(wǎng)頁(yè)特效

2024-09-05 12:18:29

字體：大中小

供稿：網(wǎng)友

頁(yè)面滾動(dòng)圖片加載特效，就像瀑布流一樣，把滾動(dòng)條拖至下面的時(shí)候，圖片才開(kāi)始加載，在JS代碼里設(shè)置了循環(huán)函數(shù)，可以無(wú)限制添下去，不過(guò)也不要太多哦，太多的話(huà)用戶(hù)會(huì)受不了的，呵呵。

<!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>頁(yè)面滾動(dòng)圖片加載</title> <style> body{text-align:center;}.list{margin-bottom:40px;}</style> </head> <body> <div>     <div>         <h1>聶微東-頁(yè)面滾動(dòng)圖片加載</h1>           <div   class="iwvjtn8m0"   id="content"> 			<script type="text/javascript">			    var main = "";			    for (var i = 1; i < 21; i ++) {			        main += '<div   id="iwvjtn8m0"   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>

上一篇：阻止右鍵菜單（阻止默認(rèn)事件）

下一篇：JS模擬酷狗音樂(lè)播放器的關(guān)閉特效