• 流式布局- 流式图片


    var imgSizer = {
        Config : {
            imgCache : []
            ,spacer : "/path/to/your/spacer.gif"
        }
    
        ,collate : function(aScope) {
            var isOldIE = (document.all && !window.opera && !window.XDomainRequest) ? 1 : 0;
            if (isOldIE && document.getElementsByTagName) {
                var c = imgSizer;
                var imgCache = c.Config.imgCache;
    
                var images = (aScope && aScope.length) ? aScope : document.getElementsByTagName("img");
                for (var i = 0; i < images.length; i++) {
                    images[i].origWidth = images[i].offsetWidth;
                    images[i].origHeight = images[i].offsetHeight;
    
                    imgCache.push(images[i]);
                    c.ieAlpha(images[i]);
                    images[i].style.width = "100%";
                }
    
                if (imgCache.length) {
                    c.resize(function() {
                        for (var i = 0; i < imgCache.length; i++) {
                            var ratio = (imgCache[i].offsetWidth / imgCache[i].origWidth);
                            imgCache[i].style.height = (imgCache[i].origHeight * ratio) + "px";
                        }
                    });
                }
            }
        }
    
        ,ieAlpha : function(img) {
            var c = imgSizer;
            if (img.oldSrc) {
                img.src = img.oldSrc;
            }
            var src = img.src;
            img.style.width = img.offsetWidth + "px";
            img.style.height = img.offsetHeight + "px";
            img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"
            img.oldSrc = src;
            img.src = c.Config.spacer;
        }
    
        // Ghettomodified version of Simon Willison's addLoadEvent() -- http://simonwillison.net/2004/May/26/addLoadEvent/
        ,resize : function(func) {
            var oldonresize = window.onresize;
            if (typeof window.onresize != 'function') {
                window.onresize = func;
            } else {
                window.onresize = function() {
                    if (oldonresize) {
                        oldonresize();
                    }
                    func();
                }
            }
        }
    }
    addLoadEvent(function() {
         if (document.getElementById && document.getElementsByTagName) {
              var aImgs = document.getElementById("content").getElementsByTagName("img");
              imgSizer.collate(aImgs);
         }
    });

     参考地址

  • 相关阅读:
    HTML DOM Document 对象
    浏览器对象模型 BOM
    JavaScript数组和字符串基础
    JavaScript基础一
    css属性hack
    浏览器兼容性问题
    css常见居中方法
    初析BFC
    学习Css的初级篇
    THML基础学习
  • 原文地址:https://www.cnblogs.com/czhyuwj/p/5965299.html
Copyright © 2020-2023  润新知