博客园_豪情

ext源码阅读 - DomHelper - createHtml,insertHtml

2012-04-21T04:02:00Z

createHtml参考：http://linder0209.iteye.com/blog/1071818

/**
* 创建html
* @param o
* {tag:string,    // 元素的标记名，如果没有，默认为div
     children|cn:string|Array|json,　// 子结点对应的json数组或字节点的html或单个json
     html:string,  // 对应的html，如果有cn或children属性就忽略
     style:function|string|json, // 元素的样式，可以是函数，字符串，json对象
     cls:string,　 // 元素的class属性的值
     htmlFor:string　  // 元素的For属性，
     x:y    // x表示其他名字，y表示非函数、非空内容
   }
     var spec = {
         id: 'my-ul',
         tag: 'ul',
         cls: 'my-list',
         style : {width:'20px',height:'30px'},
         // append children after creating
         children: [     // may also specify 'cn' instead of 'children'
             {tag: 'li', id: 'item0', html: 'List Item 0'},
             {tag: 'li', id: 'item1', html: 'List Item 1'},
             {tag: 'li', id: 'item2', html: 'List Item 2'}
         ]
     };
*/
function createHtml(o){
    var b = '',
        cn,
        attr,
        val,
        key;
    if(typeof o == 'string'){ // 若是 string 类型，直接返回
        b = o;
    } else if(Ice.isArray(o)){ // 若是 array 类型, 如: [{ tag: 'li', id: 'item0' }]
        for(var i=0,len=o.length; i<len; i++){
            if(o[i]){
                b += createHtml(o[i]);
            }
        }
    } else { // 若是 object 类型
        b += '<' + (o.tag = o.tag || 'div'); // 若没有 o.tag 属性，则默认为 div,　如: <div
        for (attr in o) {
            val = o[attr];
            if(!confRe.test(attr)){ // 忽略 tag|children|cn|html，这四个是需自定义属性
                if(typeof val == 'object'){ // 若是对象类型, 如: style : {width:'20px',height:'30px'}
                    b += ' ' + attr + '="'; // 如: style = "
                    for (key in val) {
                        b += key + ':' + val[key] + ';'; // 如: width=20px;height:30px
                    }
                    b += '"';
                } else { // 若不是对象类型，如: id: 'my-ul'
                    b += ' ' + ({cls: 'class', htmlFor: 'for'}[attr] || attr) + '="' + val + '"'; // class,for对象处理
                }
            }
        }
        if(emptyTags.test(o.tag)){ // 根据xhtml规定，忽略单标签，如：　<hr />, <br />等
            b += '/>';
        } else {
            b += '>'; // 如: <div sytle="width=20px;height:30px">
            if(cn = o.children){
                b += createHtml(cn); // 如: <li id="item0">List Item 0</li><li id="item1">List Item 1</li>
            }
            b += '</' + o.tag + '>'; // 如: </div>
        }
    }
    return b; //　如: <ol style="width:20px;height:80px;"><li id="item0"></li></ol>
}
/**
* 向DOM中插入一个HTML片段
* @param where 插入的html与el的位置关系--- beforeBegin, afterBegin, beforeEnd, afterEnd.
* @param el 内容元素
* @param html HTML片段
*/
insertHtml: function(where, el, html){
    // innerHTML是只读的：col、 colgroup、frameset、html、 head、style、table、tbody、 tfoot、 thead、title 与 tr
    // http://www.cnblogs.com/rubylouvre/archive/2009/12/14/1622631.html
    var hash = {},
        hashVal,
        rs,
        range,
        setStart,
        frag,
        rangeEl;
    where = where.toLowerCase();
    hash[beforebegin] = ['beforeBegin', 'previousSibling'];
    hash[afterend] = ['afterEnd', 'nextSibling'];
    // 为了使后面的代码更易实现，这地方成两部分实现，
    // 1.　在当前节点的外边插入，就是if外边
    // 2. 在当前节点的里边插入，在if里边做判断
    if(el.insertAdjacentHTML){ // ie
        // 对ie的table进行单独处理
        if(tableRe.test(el.tagName) && (rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html))){
            return rs;
        }
        hash[afterbegin] = ['AfterBegin', 'firstChild'];
        hash[beforeend] = ['BeforeEnd', 'lastChild'];
        if((hashVal = hash[where])){
            el.insertAdjacentHTML(hashVal[0], html);
            return el[hashVal[1]];
        }
    } else { // 旧版 firefox, firefox 11 支持 insertAdjacentHTML
        range = el.ownerDocument.createRange();
        setStart = 'setStart' + (endRe.test(where) ? 'After' : 'Before');
        if(hash[where]){
            // setStartAfter() 把该范围的开始点设置为紧邻指定节点的节点之后
            // setStartBefore() 把该范围的开始点设置为紧邻指定节点之前
            range[setStart](el);
            // http://msdn.microsoft.com/zh-cn/library/hh673538(v=vs.85).aspx#createContextualFragment
            frag = range.createContextualFragment(html); // http://www.cnblogs.com/rubylouvre/archive/2011/04/15/2016800.html
            el.parentNode.insertBefore(frag, (beforebegin == where ? el : el.nextSibling));
            return el[(beforebegin == where ? 'previous' : 'next') + 'Sibling'];
        } else {
            rangeEl = (afterbegin == where ? 'first' : 'last') + 'Child';
            if(el.firstChild){
                range[setStart](el[rangeEl]);
                frag = range.createContextualFragment(html);
                if(afterbegin == where){
                    el.insertBefore(frag, el.firstChild);
                } else {
                    el.appendChild(frag);
                }
            } else {
                el.innerHTML = html;
            }
            return el[rangeEl];
        }
    }
    throw '非法插入点 -> "' + where + '"';
}

本文链接

[译] 如何用ps制作泼水字

2012-04-09T03:43:00Z

泼水字教程

原文链接

按着习惯先看一下结果图：

在本教程中，我给大家介绍在Photoshop中如何制作泼水文字效果。知识点：笔刷的运用。
准备工作：

下载以下素材，水花笔刷是需要付费的，其它倒没什么。另外一点：笔刷在ps载入过多，会影响ps启动速度。谨慎使用。

水花笔刷下载

湖面

字体
在ps中创建一个新的文件，大小为：940px * 700px ,背景为黑色。并保存，命名为：泼水文字。将湖面的素材打开，并使用套索工具，羽化值为：40px。绘制如图所示的区域，不一定完全相似，太不能偏差太大。
使用移动工具，将选区内的区域拖拽到刚才新建的泼水文字文件中。并且将其重命名为水波，透明度降低至60%左右。并用大的软橡皮擦工具擦除边缘，使其边缘与背景完全溶入。效果如下图所示：
复制水波图层两次，分别移动到原水层左侧或右侧。并设置透明度比原来略低，创建境深的感觉。主要还是考察构图能力或透视原则。
重复复制一次水图层，然后恢复透明度为：100%，并调整位置。

好吧！这地方我不得不承认国外设计人水平的精湛，反正我经过多次的调整，反复的不断尝试才达到他图中所示的效果。一般的教程省略了这些细节，而恰恰这些细节这是初学者所迷惑的地方。我感觉这是国外教程不可取的地方。

话又说回来，这地方还是考察你构图能力和对ps软件基本工具的熟练程度。因为将来上面就是所要创建的水波文字，下面的形状堆叠为一个心形才为润合。

在当前文件的所有图层最上层，创建两个调整图层(图层面板第四个按钮半黑半白)，

曲线：

色阶：

在画布上输入任何你喜欢的字：

斜面浮雕

渐变叠加

描边

效果如图：
载入文字选区，并新建一层，填充黑色，滤镜 -> 杂色 -> 添加杂色，参数如图所示：
将杂色图层模式修改为滤色，透明度为35%左右
创建新层，并命名为：光影，用黑白交替的笔刷，填充以下形状：

这又是一步省略细节的步骤，这步要不断的调整笔刷的透明度，还间接考验了对光影的把握。光影没有技巧，就是注意平常对生活中物的光影的观赏。总结，高光，反光，背光等。
新建“水花”，导入相关水花笔刷，在其周围添加。
运用笔刷添加小溪水的感觉，
运用白色的画笔慢慢添加水雾和高光的感觉
为使效果更为显著，利用6px左右的小画笔在文本左右添加小的细节：
给其它地方添加一些小光点，使某一区域显得更为亮一点。
可以利用自由变换命令不断的变换光线的形状，以达到最好的效果。
添加色彩平衡调整图层，
最终效果如图所示：

本文链接

[译] 如何用ps制作火焰字

2012-03-29T02:48:00Z

火焰字教程

原文链接

按着习惯先看一下结果图：
火焰字历来是ps社区中的经典教程之一，我这是它的另外一个版本，主要是利用真实火焰结合ps滤镜技术。准备好了，就让我们开始吧！

ctrl + 双击，新建 600 * 400大小的文件，填充黑色背景，使用文字工具(t)输入数字1, 字体下载，并 ctrl + s 保存当前文字，命为“火焰字”。
在图层面板数字1图层名称后双击，弹出混合样式对话框，找到外发光选项，按以下参数设置：
并设置颜色叠加：
光泽设置：
内发光设置：

混合模式为：实色混合，大小：9

在当前文字图层上单击右键并选择“栅格化”。为防止误操作，也可ctrl + j 创建当前图层副本，然后关闭眼睛隐藏，做为备份。

然后在当前文字图层下新建空白图层，合并文字与空白图层，使样式完整应用于图层。

再使用直径大小为200 左右的橡皮擦工具，擦除有尖角的部分，以便癣有空间覆盖火焰。这样效果如下图所示：

点击滤镜 -> 液化命令，选择向前变形工具，参考如下设置后，使用放大镜可放大局部，不断的对形状进行拖拽处理，使其造型更像火焰袅绕多变，在期间可不断的调整画笔大小、画笔压力以得到最佳的效果。
下载火焰素材，单击图层面板组中的通道面板，选择绿色通道，并按住ctrl单击绿色通道，得到画面中高光选区，然后点击RGB通道，
在移动工具的前提下，移动当前选区中的内容到刚才“1”文档处。
用大小为15px左右的橡皮擦工具，擦除多余的部分，留下围绕1挥舞的火焰形状。
不断的重复上一步骤，降低图层透明度到:30%，并设置混合模式为叠加。
重复上一步骤，使整体都有火焰围绕的感觉。
根据自己的兴趣，可以创建更多的字母火焰。
也可以放置到其它背景中：

这是另外一位新加坡的同学，根据教程所做：

本人根据教程所做：

PSD 分层文件下载：

http://115.com/file/dpd038if#

以下是根据教程所做：

本文链接

[译] 用ps创建error水晶小图标

2012-03-28T06:31:00Z

ps 版本 cs2 以上。

原文链接：http://pshero.com/photoshop-tutorials/graphic-design/vista-error-icon

图标教程

按着习惯先看一下结果图：
先让我们看看几个vista系统的图标。下面左侧的这个图标就是我们今天要说的。通过简单的颜色，图标样式的改变，你就可以很容易做出其它图标，很多人已经做出来一些。
让我们开始吧，先创建一个新文件：ctrl + 双击: 预设 -> web -> 600 X 400

然后通过图层面板右下角的新建图层按钮新建一图层，双击图层名称，输入border

如果你当前的工具不是椭圆( Elliptical )选区工具的话，请键盘上的M键，并且使用shift + M，转换到椭圆选区工具上来
按住shift键不放，从画布的偏左上角处开始点击并拖拽，直到占满整个画布的2/3时松左键。或离顶，右，下，左空白区域相等时松键。

然后按键盘 D 键，重设前景背影为默认的黑白色，并使用alt + backspace(alt + del)填充前景色给街区。
保证在不取消选区的前提下，点击菜单命令：选择 -> 修改 -> 收缩 -> 15, 回车，delete(backspace)。
通过图层面板创建新层，双击图层名称，输入middle，并填充另外一个你喜欢的颜色。

然后ctrl + d ，取消当前选区, 并ctrl + s 保存文件，命名为 icon。
现在我们添加一些图层样式，在border图层名称后双击，弹出混合图层样式面板。通过以下参数的设定，使我们的图标有良好的光感效果。

inerr Glow: 内发光, 混合模式为：正常，不透明度为：100%

Gradient Overlay: 渐变叠加,角度为：35

Stoke: 描边
如果这几步操作对你来说比较不易操作的话，请直接到文章最后下载.PSD文件，以便你更容易的跟上我的思路。

我们一般通过编辑图层样式来更方便的创建效果。
然后，在middle图层名称后双击，像前面步骤一样，创建样式。

Bevel and Emboss: 斜面和浮雕,深度：200,大小：3，

渐变叠加，角度：135
这样图标已经有一个大概的模样。
接下来让我们来添加x。可以使用字体也可以利用ps画出来。由于vista中的x号是两边平行且有圆角，所以我采用一种叫 Army的字体,300pt大小。可以从这儿这儿下载。
很明显方向不对，需要旋转一下。ctrl+T转换到自由变换工具，按住shift键(使他保持等比且15度角旋转)且让鼠标在变形区域进行旋转，双击变形区域内或回车，以全确定此步操作。然后调整位置使其水平垂直方向相对于icon背景居中。
通过ctrl+J再复制一个x图层，分别命名为：x-top或x-bottom。

单击x-top的眼睛小图标，使他暂时隐藏。
对x-bottom进行3D边缘及阴影的制作，利用外发光添加1px的白边，使其看起来略大于x-top，请参考以下两步进行设定。
点击x-top，左边的眼睛位置，使其可见。

像前面一样，添加一个渐变图层，使其看起来有金属质感。
为使其看起来更有立体的感觉，利用移动工具选中x-botom图层，然后上移或右移使其有下图的效果。
在这个教程将要结束之前，还要在icon上添加web2.0的一些样式，使其更为完美。由于vista的icon渐变不是规则的，所以还要进行以下的操作：

在x-top图层上建一新层命为：Highlight，并且保证选中它。然后按住ctrl键单击middle层，获取middle的选区，
按 D 键，复位ps前景背景色设置，然后 ctrl + backspace ，填充 Highlight 为白色，然后调整填充为10%，使其看起来更为自然。
在保证选区工具的前提下，移动当前的选区到icon偏右下位置 backspace，留下的部分做为一个高光显示。
单击这儿下载相关文件。
做到这儿或许你感觉图标有点不太圆，或许看着不顺眼，好吧，那儿可能出了问题。

由于ps是像素图软件，所以选区创建的圆不是一个完美的圆，所以在第三步不能用椭圆工具来创建圆，而是用形状工具中的椭圆工具。

以下是我的PSD文件下载。

单击下载

本文链接

Js,jQuery版Zencoding之webstorm & phpstorm

2012-03-28T01:52:00Z

zencoding自从2009年因html,css的扩展而风靡业界，而webstorm自从2.0之后就已经集成。

无意中被不断输入的console.log,console.dir搞的很恼火，所以才有了今天的js之webstorm。由于其它编辑器对zencoding的外延不是做的很好，现下流行的编辑器里边，只有webstorm才可以扩展以下提到的命令。当然，他除了扩展js之后，还可以扩展：xml,php(phpstorm)，xsl,用户也可以自定义添加：JSP,SQL,Haml或者其它的。只是提供一个思路，抛砖引玉，具体的还要看每个人自己的code习惯。webstorm比eclipse,aptana中的更改zencoding方便之处，不用重启。而比其它ide的好处在于，他可以更改。

1. File -> Settings -> Live Templates (即可手动添加，也可以下载我添加好的文件，下载后放在：C:\Users\用户名\.WebIde10\config\templates)

这里提几个比较重要简单的扩展原则。

// 1. js 获取元素 ($end$表示光标最后停靠的位置)
w:   window
d:   document
db:  document.body
di:  document.getElementById($END$);
dn:  document.getElementsByName($END$);
dw:  document.write($END$);

df: document.createDocumentFragment()
dc: document.createElement();
// this
i: this
t that
t.:that.me = me;
i.:this.me = me;
ts:toString()
// 2. console 相关方法
cl:  console.log($END$);
cd:  console.dir($END$);
cti:console.time('1');
cte:console.timeEnd('1');
// 3. 流程控制
if:
if($END$){
}
ife:
if($END$){
} else {
}
for:
for(var i=0,len=arr.length; i<len; i++{
    $END$
}
while:
while($END$){
}
fi:
for (var $VAR$ in $ARRAY$) {
  $END$
}
4. 函数创建：
f:  function $END$(){ //  函数表达式
}
vf var $end$ = function(){ // 匿名函数
}
fc:
function $INDEX$(){  // 构造函数
}
$INDEX$.prototype = {
    name: function (){
    }
}
mf: // 字面量式方法创建
$END$: function(){
}
vo:
var $END$ = {
    name: function(){
    }
}
vf:
var $END$ = function(){
}
bb:
(function(){
    $END$
})();

// 4. jQ 相关方法：
// 原本想定为$为jq所有方法的始字母，但后来考虑不方便输入直接定为j，只保留一个 $: $();基本选择符：
// a. 选择器：
$: $()
#:  $('#$END$')
j:  $('$END$')
>:  $('.$END$') (因为.做为方法调用符，所以为shift + .即为键盘上的 >)
ji:$(this)
// b. event
jc: $().click(function(){
})
jh: $().hover(function(){
});
jb:$().bind('click', function(){
});
jl: $().live('click', function(){});
jd: $().delegate('click', function(){ });

// c.插件模板：
fn:
(function($){
    $.fn.$END$ = function(options){
        var defaults = {
        };
        opts = $.extend({}, defaults, options);
        return this.each(function(){
        });
    }
})(jQuery);

2. 上面文件，左边即为输入部分，右边为扩展后，如果手动添加，还需要在下方 :

No applicable contexts yet. Define

Define中选择你的类型：

本文链接

jQuery插件-轻量图片轮换-UISlide2

2012-03-27T06:42:00Z

图片切换2

本文链接

作品索引

2012-03-21T08:01:00Z

一、JQuery插件

二、JS组件

待续

三、PS 教程

四、PS2HTML

待续

本文链接

jQuery插件-轻量图片轮换-UISlide

2012-03-21T07:57:00Z

jQuery插件-轻量图片轮换-UISlide

特点：

1. 带标题内容的图片切换。预览图

2. 接口简单，因为简单所以修改方便。

修改第1行或第4行宽高即可。

1 .slide_wrap{position:relative;width:710px;height:340px; margin-bottom:5px;border:2px solid #ccc;background:#fff;color:#666;overflow:hidden;}
2 .slide_imglist{}
3 .slide_imglist li{float:left;margin-right:3px;display:inline;}
4 .slide_imglist li img{width:710px;height:340px;display:block;}

调用参数：

playTime    :2000,            // 间隔时间
duration    :800,             // 延迟时间
direction   :'left',          // 方向
easing      :'easeInOutQuad', // 自动播放时 easing 方式
clickEasing :'easeOutCubic'   // 点击时 easing 方式

3. 多个轮换交易方便调用。

$('#slide').UISlide();
$('#slide2').UISlide();

IE刷新之后才能出载入jquery文件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>UISlideDemo1.0</title><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://jquery-swip.googlecode.com/svn/trunk/jquery.easing.1.3.js"></script><style type="text/css">*{ margin:0;padding:0;}body{font:12px/2 arial;background:#ccc;}a{color:#0029c4;text-decoration:none;}a:hover{color:#c00;}img{border:none 0;}.wrap{width:714px;margin:40px auto;border:2px solid #aaa;background:#fff;padding:5px 5px 0;}.slide_wrap{position:relative;width:710px;height:340px; margin-bottom:5px;border:2px solid #ccc;background:#fff;color:#666;overflow:hidden;}.slide_imglist{}.slide_imglist li{float:left;margin-right:3px;display:inline;}.slide_imglist li img{width:710px;height:340px;display:block;}.slide_title{bottom:0;left:0;width:100%;height:45px;overflow:hidden;position:absolute;}.slide_title h3{position:absolute;top:0;left:0;height:45px;line-height:45px;overflow:hidden;padding:0 10px;z-index:2;display:block;}.slide_title h3 a{color:#efefef;font-weight:bold;font-size:16px;}.slide_title h3 a:hover{color:#ff0;}.slide_title em{position:absolute;left:0;display:block;top:0;width:100%;height:45px;opacity:0.45;filter:alpha(opacity=45);background:#000;z-index:1;}.slide_num{right:5px;z-index:3;top:0;position:absolute;}.slide_num dd{display:inline;margin:10px 4px 0 0;width:22px;height:22px;font-size:14px;text-align:center;line-height:22px;border:1px #eee solid;background:#d4d4d4;cursor:pointer;float:left;}.slide_num dd.active{color:#fff;border:1px #09f solid;background:#09f;}</style></head><body><div class="wrap"><div id="slide" class="slide_wrap"><ul class="slide_imglist"><li><a title="《画皮Ⅱ》正式版预告首发 魔幻大作妖魅来袭" href="http://fanbuxie.vancl.com/" target="_blank"><img src="http://i4.vanclimg.com/users/26/20120318/focus_1_120318.jpg" alt=""></a></li><li><a title="《普罗米修斯》全新中文预告首发 科幻大作终现全貌" href="http:////rihan.vancl.com/" target="_blank"><img src="http://i1.vanclimg.com/users/26/20120315/focus_6_3n_cs_120315.jpg" alt=""></a></li><li><a title="诡异华美缜密悬疑：12大日本推理名家改编宝典" href="http://children.vancl.com/search?navtype=08&attrid_category_attributes=7939" target="_blank"><img src="http://i2.vanclimg.com/users/26/20120321/focus_tz_120321_nn.jpg" alt=""></a></li></ul><div class="slide_title"><h3><a href="#" target="_blank">设计好脾气的Web页面</a></h3><dl class="slide_num"></dl><em></em></div></div><div id="slide2" class="slide_wrap"><ul class="slide_imglist"><li><a title="现代主妇vs职业女性：从 &quot;广告狂人&quot; 看60年代女性风尚" href="http://vt.vancl.com/" target="_blank"><img src="http://i5.vanclimg.com/users/26/20120316/foucs_2_4_vt_201203016n.jpg" alt=""></a></li><li><a title="诡异华美缜密悬疑：12大日本推理名家改编宝典" href="http://xiuxianku.vancl.com/" target="_blank"><img src="http://i3.vanclimg.com/users/26/20120318/focus_5_120318.jpg" alt=""></a></li><li><a title="2012佳片鉴赏录：25部奥斯卡种子影片超前瞻" href="http://nanxie.vancl.com/" target="_blank"><img src="http://i2.vanclimg.com/users/26/20120320/focus_6_n_120320.jpg" alt=""></a></li></ul><div class="slide_title"><h3><a href="#" target="_blank">设计好脾气的Web页面</a></h3><dl class="slide_num"></dl><em></em></div></div></div><script type="text/javascript">/*** Copyright (c) 2011 Jikeytang (http://jikey.cnblog.com/)* Version: 0.0.1* Demo: http://jikey.cnblog.com/*/;(function($){// 图片轮播插件$.fn.UISlide = function(options){var defaults = {playTime :2000, // 间隔时间duration :800, // 延迟时间direction :'left', // 方向easing :'easeInOutQuad', // 自动播放时 easing 方式clickEasing :'easeOutCubic' // 点击时 easing 方式};var opts = $.extend({}, defaults, options); // 参数合并var slide = {// 播放调用及一些变量的初始化play: function(opts, me){var that = this,isPlay;that.me = me;that.picList = me.find('ul'); // 图片列表that.title = me.find('div').find('a'); // 图片标题that.oNum = me.find('dl'); // 数字按钮that.lis = that.picList.find('li'); // lithat.size = that.lis.length; // 图片的数量that.lisWidth = that.lis.width();that.isPlay = isPlay; // 是否自动播放for (var p in opts) { // opts 绑定到 slidethat[p] = opts[p];}that.setNums().setTitle();if(that.size > 1){ // 如果图片数量大于则轮播that.autoPlay().slideEvent();}},// 设置按钮setNums: function(){var that = this,links, // 图片的链接me = that.me,size = that.size,oNum = that.oNum, // 按钮对象arrTemp = [];links = that.picList.find('a').first();that.title.html(links[0].title).attr('href', links[0].href); // 把链接的 title 内容放到标题栏上显示for(var i=1; i<=size; i++){arrTemp.push('<dd>' + i + '</dd>');}oNum.append(arrTemp.join(''));that.slideNum = oNum.find('dd');that.numWidth = (that.slideNum.width() + parseInt(that.slideNum.css('margin-right')) + 2) * size + 1; // 数字按钮宽度that.setTitle();return that;},// 自动播放autoPlay: function(){var that = this,activePos,direction = that.direction,picList = that.picList,slideNum = that.slideNum,playTime = that.playTime;that.isPlay = setInterval(function (){activePos = that.oNum.find('.active').index();if(direction == 'left'){if(activePos == (that.size - 1)){direction = 'right';activePos --;} else {activePos ++;}} else {if(activePos == 0){direction = 'left';activePos ++;} else {activePos --;}}picList.stop().animate({'margin-left': 0 - activePos * (that.lisWidth + 3)}, {duration: that.duration, easing: that.easing});slideNum.removeClass('active').eq(activePos).addClass('active');var links = picList.find('a').eq(activePos);that.title.html(links[0].title).attr('href', links[0].href);}, playTime);return that;},// 设置标题setTitle: function(){var that = this;that.oNum.width(that.numWidth + 2); // 设置数字按钮宽度that.picList.width((that.lisWidth + 3) * that.size); // 设置图片容器总宽度that.slideNum.first().addClass('active');return that;},// 绑定数字按钮事件slideEvent: function(){var that = this,slideNum = that.slideNum;slideNum.click(function(){var thisNum = $(this).index();that.picList.stop().animate({"margin-left":0 - thisNum * (that.lisWidth + 3)}, {duration:that.duration, easing:that.clickEasing});slideNum.removeClass('active').eq(thisNum).addClass('active');var links = that.picList.find('a').eq(thisNum);that.title.html(links[0].title).attr('href', links[0].href);});// 鼠标到画面中任意位置，停止播放that.me.hover(function(){clearInterval(that.isPlay);}, function(){that.autoPlay();})return that;}};return this.each(function(){ // $(a,b) 方式调用slide.play(opts, $(this));});}})(jQuery);</script><script type="text/javascript">$('#slide').UISlide();$('#slide2').UISlide();</script></body></html>

另外的方式：

本文链接

jQuery插件-轻量弹出层-UIDialog

2012-03-19T07:14:00Z

参数解释：

id         :null,  // 需要赋值的ID
callOnOpen :null,  // 弹出后调用方法
callOnClose:null,  // 关闭后调用方法
eventType  :null,  // 事件类型 click, blur, change, dblclick, error, focus, load, mousedown, mouseout, mouseup
idContent  :null,  // 需要添加的id
width      :'auto', // 宽
height     :'auto', // 高
title      :'消息',  // 标题
content    :'测试内容'  // 内容

直接上代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>    <title>test</title>    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>    <style type="text/css">        *{ margin:0; padding:0;}        body{font:12px/2 arial; background:#ccc;}        a{color:#0029c4;text-decoration:none;}        a:hover{color:#c00;}        .wrap{ border:2px solid #aaa; background:#fff; padding:20px;}        /* uidialog */        .ui-dialog{position:fixed;min-width:150px;background:#fff;overflow:hidden;z-index:99999;border:5px solid #767576;}        .ui-dialog h1{*margin-top:-3px;position:relative;text-indent:1em;padding:3px 0;font-size:14px;font-weight:normal;background:#efefef;border-bottom:1px solid #ccc;-moz-user-select:none;/* FF禁止选择文字 */-webkit-user-select:none;/* Chrome禁止选择文字 */}        .ui-dialog h1 .ui-close{position:absolute;right:10px;cursor:pointer;text-indent:0;}        .ui-dialog-body{ padding:10px;}        .ui-title{ border-bottom:1px solid #ccc; background:#f0f0f0;}        .ui-mask{position:absolute;left:0;top:0;z-index:77777;background:#000;filter:alpha(opacity=50);opacity:0.5;}        /* 模拟IE6 position:fix的效果 From: http://www.blueidea.com/tech/web/2010/7665.asp */        *html{background:url(*) fixed;}        *html body{margin:0;height:100%;}        .wrap{ width:500px; margin:40px auto;}    </style></head><body><div class="wrap">    <h2>特点：接口丰富、轻便、弹出层上层、单击遮罩层关闭。</h2>    <ol>        <li>            <h1>测试 $.fn.UIDialog 调用，并弹出层上层</h1>            <a href="javascript:void(0)">测试a链接1</a>            <table class="tab" style="display:none;">                <tr>                    <th>用户名：</th>                    <td><input type="text" name="" id="useranme"></td>                </tr>                <tr>                    <th></th>                    <td><input id="mybtn" type="submit" value="又是一个新的"></td>                </tr>            </table>        </li>        <li>            <h1>测试弹出 next() 的内容</h1>            <a href="javascript:void(0)">测试a链接2</a>            <div>                <p>扯面是一种陕西和山西的传统面食小吃，已有3000年。主要原料：上白面粉、鸡蛋、菠菜、红萝卜、调味品。</p>                <p>做扯面，和面的技术是最关键的。和面过程中有几个关键点：首先水和面的比例是一个关键，做扯面要求和的面最软，揪片次之，手擀面、刀削面最硬，做扯面一般是一斤面六两多水。和面的过程也比较重要，先把面打成面穗(水一点一点的加)，再揉成面团，兑水扎软(一般反复扎几次)，然后用湿布蒙住。醒面也是必需的，和好的面醒半小时后才好用。 </p>            </div>        </li>        <li>            <h1>多种方式调用</h1>            <a href="javascript:void(0)">测试a链接3</a>            <p>扯面是一种陕西和山西的传统面食小吃，已有3000年。</p>            <input id="btn" type="button" value="test-$.UIDialog" />            <div>热乎乎的扯面，浇上自己喜欢的调和(调料)，或番茄酱、或肉炸酱、或炖菜，配上香喷喷的老陈醋，油汪汪的红辣子，挑一根放到嘴里一吸一嘬之下，扯面特有的筋道和绵软，你只有试过才知道哦。 </div>            <input id="btn2" type="button" value="test-$.fn.UIDialog">        </li>    </ol>    <br></div><script type="text/javascript">    (function($){        $.fn.UIDialog = function(options){            var defaults = {                IE         :$.browser.msie,                IE6        :$.browser.version == 6,                FIREFOX    :$.browser.mozilla,                window     :$(window),                document   :$(document),                body       :$(document.body),                id         :null,  // 需要赋值的ID                callOnOpen :null,  // 弹出后调用                callOnClose:null,  // 关闭后调用                eventType  :null,  // 事件类型 click, blur, change, dblclick, error, focus, load, mousedown, mouseout, mouseup                idContent  :null,  // 需要添加的id                width      :'auto', // 宽                height     :'auto', // 高                title      :'消息',  // 标题                content    :'测试内容'  // 内容            };            var opts = $.extend({}, defaults, options);            var instance = {                // 初始化方法                init: function(opts, me){                    var that = this,                        cache = $.UIDialog.cache;                    for(var p in opts){ // opts 绑定到 instance                        this[p] = opts[p];                    }                    that.me = me; // 被调用者                    that.createDialog();                    that.createMask();                    that.mask.fadeTo('slow', 0.5).click(function(){                        that.close();                    });                    cache.push(that.dialog);                    cache.push(that.mask);                    that.dialog.fadeIn('slow', function(){ that.callOnOpen && that.callOnOpen(); });                    that.setZIndex();                },                // 创建容器                createDialog: function(){                    var that = this,                        dialog = $('<div class="ui-dialog"></div>').appendTo(this.body).hide(),                        dialogTitle = $('<h1 class="ui-dialog-title"></h1>').appendTo(dialog),                        dialogBody = $('<div class="ui-dialog-body"></div>').appendTo(dialog),                        titleClose = null;                    opts.id && dialog.attr('id', opts.id);                    that.dialog = dialog;                    that.title ? dialogTitle.append(that.title) : title.hide();                    titleClose = $('<a class="ui-close" href="###">关闭</a>').appendTo(dialogTitle).click(function(){ that.close(); });                    dialogBody.append(that.content);//                    dialogBody.append(that.me.next().html());                    that.IE6 && dialog.css({position:'absolute'});                    that.setSize();                    return that;                },                // 创建模板                createMask: function(){                    var that = this,                        body = that.body,                        windowWidth = that.window.width(),                        mask = $('<div class="ui-mask"></div>').appendTo(body).hide();                    that.mask = mask;                    mask.css({width: windowWidth, height: that.document.height()});                    that.IE6 && mask.html('<iframe src="about:blank" style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-1;filter:alpha(opacity=0)"></iframe>'); // 添加全屏iframe以防止select穿透                    return that;                },                // 设置大小                setSize: function(){                    var that = this,                        dialog = that.dialog,                        window = that.window,                        windowWidth = window.width(),                        windowHeight = window.height(),                        left, top;                    dialog.css({width: that.width, height: that.height});                    var defaultTop = Math.floor((windowHeight - dialog.outerHeight()) / 2);                    left = (windowWidth - dialog.width()) / 2 + 'px';                    top = defaultTop + 'px';                    dialog.css({left: left, top: top});                    return that;                },                // 设置堆叠值                setZIndex: function(){                    var that = this,                        dialog = that.dialog,                        mask = that.mask,                        indexVal = $.UIDialog.globalIndex++; // 引用全局变量，否则每次初始化后值为原始值                    dialog && dialog.css({zIndex: indexVal});                    mask && mask.css({zIndex: indexVal - 1});                    return that;                },                // 关闭                close: function(){                    var that = this,                        cache = $.UIDialog.cache,                        dialog = cache[cache.length - 2],                        mask = cache[cache.length - 1];                    dialog.trigger('unload').unbind('click');                    mask.trigger('unload').unbind('click');                    that.slowRemove(dialog).slowRemove(mask);                    cache.splice(cache.length - 2, 2);                    return that;                },                // 渐隐                slowRemove: function(ele){                    var that = this;                    ele.fadeOut('slow', function(){                        that.callOnClose && that.callOnClose();                        $(this).remove();                    });                    return that;                }            };            var eventType = opts.eventType;            if(eventType){ // 如果是 $.fn.UIDialog 方式调用                return this.each(function(index){                    $(this).bind(eventType, function(){                        instance.init(opts, $(this));//                        return false;                    });                });            } else { // 如果是 $.UIDialog 方式调用                instance.init(opts, $(this));            }        };        $.UIDialog = function(s){            $.fn.UIDialog(s);        };        $.UIDialog.globalIndex = new Date().getFullYear() + '' + new Date().getHours();  // 全局堆叠值,不能超过最大值(2147483647) From: http://softwareas.com/whats-the-maximum-z-index        $.UIDialog.cache = []; // 缓存对象    })(jQuery);    $('a').click(function(){        $.UIDialog({            content: $(this).next().html(),            id: 'testtab',            width: 500        });        $('#testtab #mybtn').click(function(){            console.log($('#testtab').find('#useranme').val());        });    });    $('#mybtn').live('click', function(){        $.UIDialog({            content: '我是一个兵'        })    });    $('#btn').click(function(){        $.UIDialog({            content: $(this).next().html()        });    })    $('#btn2').UIDialog({        eventType: 'click',        content: '我是一个弹出层！'    })</script></body></html>

本文链接

JavaScriptDOM高级程序设计- generateDOM.js

2012-02-15T02:46:00Z

效果看演示，这是此书第三章的一个例子，与原书中示例不同的是，经过封装，结构更清晰，调用更方便，方法实现也因为封装而做了稍为的改动。

其中generateDOM里边几个方法介绍：

generateDOM = {
    generate: function(){},
    // 这是入口的核心方法，外部绑定到onclick事件处理
    // 在这中通过 walkTheDOMRecursive() 递归子节点，调用 processNode() 方法对节点元素进行转化
    processNode: function(){},
    // 如果存在诸如： <div class="" style=""></div> 中的 class,style等属性时，循环遍历属性，
    // 并通过 walkTheDOMRecursive() 进行递归，调用 processAttribute() 方法对节点属性进行转化
    processAttribute: function(){}
}

实例下载

本文链接