zoukankan      html  css  js  c++  java
  • 高级图像替换

    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');
    

      

  • 相关阅读:
    Python学习笔记(三)- 变量
    Python学习笔记(二)-程序执行原理
    Python学习笔记(一)
    牛客算法周周练7-A-收集纸片-dfs解决图的路径问题
    HihoCoder1078-线段树的区间修改-线段树区间修改、查询-模板题
    POJ1298-字符串转换-水题
    java的内存分析(内存模型)
    Linux的自有服务-SSH服务(重点)
    js-类似邮箱中的删除文件-全选、不选、反选
    jmeter数据分析,压测实现
  • 原文地址:https://www.cnblogs.com/webFrontDev/p/2820387.html
Copyright © 2011-2022 走看看