Skip to main content
 首页 » 编程设计

jQuery高级图像替换

2022年07月16日47langtianya
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'); 

  


本文参考链接:https://www.cnblogs.com/webFrontDev/archive/2012/12/16/2820387.html