高级图像替换

var ImageReplace = {
        replaceImage: function (element) {
            // 取得元素
            element = ADS.$(element);
            // 创建图像元素
            var image = document.createElement('img');

            // 当图像载入成功后再添加span和类名
            ADS.addEvent(image, 'load', function () {

                var s = document.createElement('span');
                // 将span添加为元素的子元素
                ADS.prependChild(element, s);

                // 创建必要的title属性
                if (!element.getAttribute('title')) {
                    var i, child;
                    var title = '';
                    // 循环遍历子元素以组合title属性
                    for (i = 0; child = element.childNodes[i]; i++) {
                        if (child.nodeValue) {
                            title += child.nodeValue;
                        }
                    }
                    element.setAttribute('title', title);
                }
                // 修改类名以标明
                // 变更并应用css
                ADS.addClassName(element, 'advancED');
            });

            // 载入图像
            var styleSheet = ADS.getStyleSheets('advancED.css')[0];

            if (!styleSheet) {
                return;
            }
            var list = styleSheet.cssRules || styleSheet.rules;

            if (!list) {
                return;
            }
            var j, rule;
            for (j = 0; rule = list[j]; j++) {
                // 查找规则
                // 可能是#element-id span
                // 或者 .advancED#element-id span
                // 或者MSIE中的, .advancED#element-id SPAN
                // 其中element-id是传递到方法中的参数
                if (rule.selectorText.indexOf('#' + element.id) !== -1
                        && rule.selectorText.indexOf('.advancED') !== -1
                        && rule.selectorText.toUpperCase().indexOf(' SPAN') !== -1) {
                    // 使用正则表达式: /url\(([^\)]+)\)/
                    // 在css规则中查找url
                    var matches = rule.style.cssText.match(/url\(([^\)]+)\)/);
                    // matches[1]中包含的是与正则表达式
                    // 匹配的捕获圆括号中的值
                    if (matches[1]) {
                        image.src = matches[1].replace(/"/g, '');
                        break;
                    }
                }
            }
        },
        run: function (elem) {
            var that = this;
            ADS.addEvent(window, 'load', function () {
                that.replaceImage(elem);
            });
        }
    };

    ImageReplace.run('advancedHeader');

  

posted @ 2012-12-16 13:22  LukeLin  阅读(255)  评论(0编辑  收藏  举报