使用Shadows.js产生带阴影的文字

1.加载文件

<script type="text/javascript" src="Shadows.js"></script>

编写html：
<div style="font: bold 32pt sans-serif;">
<span shadow = '3px 3px blue 5px 5px red 7px 7px green'>Shadow</span> |No Shadow
</div>

------------------------------------

Shadows.js代码

/**
 * Shadows.js: shadowed text with CSS.
 * 这个模块定义了一个全局对象叫做阴影shadow
 * 这个对象包含两个工具程序
 *Shadows.add = function(element, shadows)
 *添加指定的shadows到指定的元素。第一个参数是文档元素或者文档ID。这个元素必须有一个单独的文本节点作为子节点。这个子节点就是要有阴影的文本。
 *阴影被一字符串函数定义，这些以后系统解释。
 * Shadows.addAll(root, tagname):
 *通过标签，找出所有指定根节点的后代。如果有任何有shadow属性的元素，就用这个元素和他的属性，调用shadows.add()。如果检查所有元素，
 *没有指定标签，如果这个文档对象，没有指定根节点，当文档第一次载入，这个程序就会被调用一次。
 * Shadow Syntax
 * 阴影被类似【x y 颜色】的字符串定义。一个或者更多的3组数字定义x偏移、y偏移和色彩。每一个值必须符合css标准。如果指定了不止一个阴影，
 * 第一个被指定的阴影在最底下，被下一个阴影覆盖。比如“4px 4px #ccc 2px 2px #aaa”
 
var Shadows = {};

//为指定元素加阴影
Shadows.add = function(element, shadows) {
    if (typeof element == "string")
        element = document.getElementById(element);

    // 分割shadow属性字符串，去头尾空格，用空格分割
    shadows = shadows.replace(/^\s+/, "").replace(/\s+$/, "");
    var args = shadows.split(/\s+/);

    // 找到需要打阴影的文本节点
    // 为了简化，我们只在此文本节点的第一个子节点加阴影
    var textnode = element.firstChild;
    
    // 给这个文本容器一个位置参数，所有阴影位置都相对于他。
    
    element.style.position = "relative";

    // 创建一个阴影
    var numshadows = args.length/3;           // how many shadows?
    for(var i = 0; i < numshadows; i++) {     // for each one
        var shadowX = args[i*3];              // get the X offset
        var shadowY = args[i*3 + 1];          // the Y offset
        var shadowColor = args[i*3 + 2];      // and the color arguments

        // 创建新的标签<span> 
        var shadow = document.createElement("span");
        // 为阴影添加用指定的位移和颜色属性
        shadow.setAttribute("style", "position:absolute; " +
                            "left:" + shadowX + "; " +
                            "top:" + shadowY + "; " +
                            "color:" + shadowColor + ";");

        // 添加新属性的文本节点副本
        shadow.appendChild(textnode.cloneNode(false));
        // 把这个 span 添加到容器
        element.appendChild(shadow);
    }

    // 现在我们添加这个阴影文本到文档文本 <span>
    var text = document.createElement("span");
    text.setAttribute("style", "position: relative"); // 位置
    text.appendChild(textnode); // 把原始文档添加到此节点
    element.appendChild(text);  // 添加节点到容器
};

// Scan the document tree at and beneath the specified root element for
// elements with the specified tagname.  If any have a shadow attribute
// pass it to the Shadows.add() method above to create the shadow.
// If root is omitted, use the document object.  If tagname is omitted,
// search all tags.遍历文档树和指定根目录底下元素查找特定标签的元素。如果有shadow属性的，就传递给Shadows.add() 方法创建阴影。
// 如果根省略根目录，用文档对象。如果标签省略，查找整个标签。

Shadows.addAll = function(root, tagname) {
    if (!root) root = document;   // 没有根目录，用整个文档根
    if (!tagname) tagname = '*';  // 没有指定标签名，用整个标签
    
    var elements = root.getElementsByTagName(tagname); // 查找所有标签
    for(var i = 0; i < elements.length; i++) {           // 每个标签
        var shadow = elements[i].getAttribute("shadow"); // 如果已经有shadow属性
        if (shadow) Shadows.add(elements[i], shadow);    // 创建一个shadow
    }
};