5月份的杭州区w3c标准化交流会

带着感冒 去了口碑做了次分享，分享的内容是最近刚接触到的并且用的比较爽快的《闭包式js架构》
顺便吐槽一下，这次来的人不多，不知道是不是不太好意思来交流还是怎么了，是不屑么~？，就当交朋友么~ 其实我也很菜的，听了就知道。

以下是我最近在做新系统的时候用到的一种 闭包式js架构 书写方法，大家慢慢看，有些地方似曾相识，说不定有你想要的东西，仅仅是分享，也许又更好的实现方法。

1. 说说闭包

因为这样的架构思想又一些类似 javascript 的闭包概念。所以我在分享的时候做了下闭包的引导。
分享前做PPT的时候特意去百度娘那里看了下关于闭包的知识补习一下。百科
分享的时候因为主要讲的不是闭包所以顺便带过一下，不过会后，似乎有人反而对闭包感兴趣，嘎嘎。真是指哪哪不响哇。

回来又抽空查了下 《javascript 高级程序设计》中的闭包解释，似乎比百度娘上面的更浅显一些，百科上的是一种比较极端的闭包，(有空朋友可以翻阅一下：p56)。 最简单的闭包 就是全局变量。

2. 利用匿名函数解决$冲突

很多朋友应该会碰到过 一个老系统页面里好多js库的情况吧。神嘛 prototype jQuery mootools 会时不时暂用$符号，导致各种冲突。
记得jquery 有个方法是把$让出来。
这里给出一个比较好用的匿名函数 来形成 封闭作用域来实现。 很多jquery 插件就是这样来书写的

(function($){

/***
 * make $ in Closed Scope
*/
$(function(){
    //do something on dom ready
});

})(jQuery);

利用匿名函数把，jQuery 引入匿名函数，这样在匿名函数的作用域里，你就可以自由的使用$了，并且这样也同样试用与其他库。

3. 怎样不污染命名空间

这个问题曾经困扰我挺久的，因为原现公司老系统里遍地都是 全局变量 全局fun，命名空间污染的让人蛋疼菊紧。 =，=

那么经过我哥的教导，就是利用 变量类形式 只占用 一个全局变量。如下：

(function($){

$.namespace('Platform.tms.home');

})(jQuery);

上面的namespace是一个jquery插件用来方便建立命名空间。
其实它就等同于下面这段代码。是不是用插件看起来简单多了。

var Platform = {}
    Platform.tms = {}
    Platform.tms.home = {}

4. 所谓 闭包式 js 架构 前端书写

以上其实都是铺垫啦。
有了命名空间不污染全局变量，有了封闭空间匿名函数不会产生js库间的冲突，两者问题都良好解决。
现在要把两者结合起来，形成现在的 架构形式。代码如下：

/**
 * @ TMS Package
 *
 * @author qilei.weiql
 */
(function($, TMS) {

var util = TMS.util;

})(jQuery, Platform.tms);

从代码里可以看出，我将独立的全局变量类Platform 和 jQuery 引入 匿名函数。
这样做的好处显而易见，就是利用 Platform 搭建桥梁，让 匿名函数内的 资源可以通过 Platform 访问到 其他匿名函数的资源。
简单的说就是类似：一个应用 当它需要用到某组件，那么只要包含某组件js文件进来就可以。

5. 说明下这样书写的好处

好处除了前面说的，避免 命名空间污染，不产生库冲突，同时在封闭作用域内，你可以通过引用将全局变量类冗长的名字简化。如上面的代码中就用TMS 代表 Platform.tms，然后直接使用 TMS.util 来访问 Platform.tms.util，这样看起来是不是就简洁许多。这个就是要懒得有风度的表现^_^
甚至可以直接缓存你需要的组件，如：

var util = TMS.util;

var dialog= TMS.widgets.dialog;

6. 从一个栗子 表现书写心得

(function($, TMS) {

/*************************
 *  Header 头部控制类
 */
var Header = {
	init : function(){
		this._initHover();
	},
	_initHover : function(){
		//do something
	}
}

TMS.home.header   = Header ;

})(jQuery, Platform.tms);

先丢一块代码给大家。上面的代码是渲染一个应用的头部js 文件。
外围代码跟上面差不多。
我的书写方法是 先 新建一个 Header 变量类，里面有一些子方法，如启动方法， 还有其他一切跟header 相关的方法都在里面。
然后将 header 跟 TMS.home.header 对接，便于被其他组件引用， 当然(如果你不像被外接影响，可以不用对接，这样就完全不受影响)

7. 方便的启动函数便于调试

看了上面的那么多是不是发现写了那么多怎么启动。。。 现在就跟你说怎么启动，
上面栗子中header 不是 init() 方法么，这个就是 启动函数用来初始化一些数据以及启动专用。
那么一个应用里又很多区域需要启动那么代码就可以这样写。

(function($, TMS) {

$(function(){
TMS.home.header.init();
TMS.home.cate.init();
TMS.home.slider.init();
});

})(jQuery, Platform.tms);

上面就是对3个模块进行启动操作，就像开关一样，有些人会习惯在 启动函数上添加一些参数神嘛的（类似插件那样），但是这就像是开关一样，开关追求的是一种简洁，讲复杂的东西都放在init()里去吧，会让代码更又层次。
同时 当你需要只对一个模块进行调试的时候，你就只需要注释掉其他两行代码就可以不启动了。是不是很方便。

8. 闭包式的由来

说了这么多，这样的书写方法以及优点，闭包式 的名字 是因为 它的两个特性跟闭包有点相似，一个是 封闭的作用域，另外一个是有一个全局变量类， 从一个封闭的作用域中 能够访问到 外部 全局资源，这个就是类似闭包的概念。

当然这个名字还是我YY出来的，也许它已经又它的学名了，如果又谁知道的话就不要吝啬 分享一下哇^__^

9. 其他一些可以扩展的东西

上面的那么多心得都是在 我哥(笨笨) 虚心教导下产生的，
本来这次分享是直接邀请他来分享的，不过似乎他更忙些。
之后还会分享一些 进阶内容

• a. 目录配置规范，为了让组件更规范，必须又它的目录规范
• b. namespace 命名空间 的命名规范，一套好的命名规范能让整个架构非常又调理
• c. Js 调试，合并方案，因为各个功能应用组件等都是分布在各个js 文件内的，在发布的时候需要又个合并方案，类似YUI

好了这次分享就到这里了，又更好的idea 欢迎 留言 交流学习呢 ^__^

您可能还对这些日志感兴趣

• 乱翻乱教- jQuery 制作N级导航菜单
• 菜鸟级: 标签切换效果 – JQuery实现
• 滚动新闻 – jquery 扩展插件
• 三元运算符 使用小技巧一则 – javascript
• 神经特长 – lazy hover 延迟激活jquery 插件

表达式 (expr1) ? (expr2) : (expr3)
在 expr1 求值为 TRUE 时的值为 expr2，在 expr1 求值为 FALSE 时的值为 expr3。

============

普通用法

当你发现你经常用if else

if(拜春哥 || 拜考试帝){
    不挂科;
}else{
    门门挂;
}

那么三元的表示法就是

拜春哥 || 拜考试帝 ? 不挂科 : 门门挂

很帅气的发现代码 精辟了 好多。

日常中经常会有这样的 if else 判断，特别是嵌套比较多的时候 用三元是比较和谐的，可以让你的代码看起来更加清爽，结构清晰。

稍微聪明点的用法

通过不断的变化，可以衍生出很多三元的用法。如下一段jquery代码

flag ? $('body').addClass('hover') : $('body').removeClass('hover') ;

甚至更变态些的。

$('.item')[ flag ? 'addClass' : 'removeClass']('hover')

上面的代码看着比较困惑。因为当flag = true 的时候 ，代码就变成以下代码：

$('.item')['addClass']('hover')

这样写法等同于。

$('.item').addClass('hover')

具体解释 详见 豪妹的文章
// 一开始我一直搞不懂为啥子可以这样写，经过沟通突然领悟了，咩哈哈

再升华一下

可以根据需要来调用自己想要的function来处理更多的事情。

function a(){
      do something
}
function b(){
      do something
}

flag ? a() : b();

那么为师的完全体

于是有了这么个案例，两个按钮 一个向前的行为，一个向后的行为。操作的功能都差不多。

    var action_turn = function(e, type){
        var self = $(e).closest('li');
        var target = self[type === 'prev' ? 'prev' : 'next']();
        target.addClass('has-img');
        self.removeClass('has-img')
    }

    var btn_next = $('#item-photo-panel a.next')
    btn_next.click(function(){
        action_turn(this, 'next');
        return false;
    });
    var btn_prev = $('#item-photo-panel a.prev')
    btn_prev.click(function(){
        action_turn(this, 'prev');
        return false;
    });

尽量避免的情况

alert( true ? 'true' : false ? 't' : 'f' )

我指的是尽量避免如上嵌套的 三元，因为在js 中 语句是从右到左，上面的代码等同于

alert( true ? 'true' : ( false ? 't' : 'f' ) )

如php 中这个结果就完全不一样，三元嵌套的时候是优先左边的。

echo (( true ? 'true' :  false ) ? 't' : 'f'  )  //php中

tip：
另外发现php中的三元有这样的提示

Note: 注意三元运算符是个语句，因此其求值不是变量，而是语句的结果。如果想通过引用返回一个变量这点就很重要。在一个通过引用返回的函数中语句 return $var == 42 ? $a : $b; 将不起作用，以后的 PHP 版本会为此发出一条警告。

但是经过试验，发现在javascript 中上面的做法是可以起作用的，大概是js 比较BT，严谨度没有php那么大的原因。

您可能还对这些日志感兴趣

• 闭包式 js架构 前端书写心得(上)
• 神经特长 – lazy hover 延迟激活jquery 插件
• 系统级应用项目中的函数命名冲突问题
• 走马观花 – jQuery调试工具- jQuery pad
• 隔山打牛 – jQuery中 trigger() & bind() 使用心得 (二)

做导航菜单的时候，有的时候希望，鼠标移到菜单上去过会儿才激活二级菜单，鼠标移出去之后过会儿才消失。jquery自带的 hover 事件是立马响应的。google了下网上好像没lazyhover的插件。于是 就华丽丽的诞生了这个lazyhover 的插件^__^。

闲话少说，先上代码：

$(function(){
    $.fn.lazyhover = function(fuc_on, fuc_out, de_on, de_out) {
        var self = $(this);
        var flag = 1;
        var h;
        var handle = function(elm){
            clearTimeout(h);
            if(!flag) self.removeData('timer');
            return flag ? fuc_on.apply(elm) : fuc_out.apply(elm);
        };
        var time_on  = de_on  || 0;
        var time_out = de_out || 500;
        var timer = function(elm){
            h && clearTimeout(h);
            h = setTimeout(function() { handle(elm);  }, flag ? time_on : time_out);
            self.data('timer', h);
        }
        self.hover(
            function(){
                flag = 1 ;
                timer(this);
            },
            function(){
                flag = 0 ;
                timer(this);
            }
        );
    }
});

插件使用方法我就不说了，直接贴带代码前就可以，当然jquery.js是必要的(丫不用jquery就当看A-V =，=)。

算了，还是贴个使用方法吧：使用方法其实跟 jquery一样就是多了两个参数，一个是延迟进入的时间(毫秒)，还有一个是延迟退出的时间。

$('#target').lazyhover(
    function(){
            $(this).addClass('unfold');
    },
    function(){
            $(this).addClass('unfold');
    },
    200,1000 //就多了2个参数
);

目前只是个初版，觉得有好多细节可以优化，
待优化点：

• 1. 比如当延迟时间是0的时候就要避开setTimeout，毕竟setTimeout是个比较耗资源的家伙。
• 2. 其次当操作对象过多的时候浏览器负载能力的处理，目前是单对象独立时间事件

好了打完收工，有意见想射就射出来吧。哥不怕，咩哈哈~~~~ 用脸接着
开源才是真汉子。

您可能还对这些日志感兴趣

• 闭包式 js架构 前端书写心得(上)
• 三元运算符 使用小技巧一则 – javascript
• 系统级应用项目中的函数命名冲突问题
• 走马观花 – jQuery调试工具- jQuery pad
• 隔山打牛 – jQuery中 trigger() & bind() 使用心得 (二)

原因在哪里~~~~?

因为它历史悠久~~~，当初设计这个系统的时候，架构师没想到它以后会成为一个庞大的系统，也不曾想过以后还有那么多蛋疼的前端会加入进来，更没想过，页面上的交互会越变越多，只是单纯的想解决燃眉之急的一个小交互。
于是乎，很多规则，命名方式，功能架构都没有一个清晰的解释型的图表出来。

得扯远了··· 唠叨了一下，^_^

对于一个新的系统，命名冲突问题如何解决？

我就单单说说我最近做的这个系统中关于js 部分的函数命名的一个方法吧。
先看一下如下图：

智商高的童鞋相信看了这图就知道啥意思，这个东东可是我哥写了那么多js以及 OOP思想的一些结晶，我觉得很强大，至少我这么觉得，因为很好用。飞鱼端了端眼睛：看不懂的话，继续往下看^_^

首先是减少全局参量
全局这个东西 应该是越少越好，就像jquery 用个美元$号一样（虽然经常被其他js 库抢），所以如果要让一个系统有一个简洁的js 系统架构，最好给它起个全局变量，这样的好处是，你的系统只占一个全局变量(当然jquery等$是必须的，因为你得依赖它)。这样从命名上就避开了全局变量冲突的问题。

让你的js 系统函数 都分组升级成类
然后根据系统的功能的类型 进行划分，比如web中系统应用，无外乎 layout 初始化，然后是Effect效果，然后是通用模块，等等。这样做的好处是当你有需求要添加什么功能的时候就可以对症下药，而不会出现要加什么功能就往系统里的js 部分最下方添加，导致页面上的js 代码 像狗皮膏药一样，那样会让你的代码很没有深度以及层次(此句话，很有深度，借用我哥的话)
可能上面说的全局变量，功能分类说了懂了，但不知道咋实现。这一步开始将它实体化。
新建一个js文件my.js，写入如下面的代码:

var My = {}

然后给你的系统添加一个启动函数，就像机器的开关一样，我们将其命名为run()多么直观^_^

var My = {
    run: function() {
         //just do something....
         alert('你好，死猪！')
    }
};

上面的代码其实就是一个类，和它的一个方法，完全的OOP 思想。
那么怎么启动它呢，很简单在它的下面加个动作来开动它。就是标准的jquery 语法。

$(function() {
    My.run();
});

这样我们的系统就起来了。
然后我们给系统增加一些功能，先从layout模块 来。
My 类下添加一个新的子类 My.Layout。

var My = {
    run: function() {
         //just do something....
         alert('你好，死猪！');
         My.Layout.run();
    }
};
My.Layout = {
    run: function() {
         alert('您又便秘啦？');
    }
};

这里有个小技巧就是子类命名方式是首字母大写，用2个英文单词构成，来提高识别度。
看起来，这样来访问My.Layout.run(); 这个方法还是挺长，但是它用点号分隔开，让其命名方式变成了三维。而不是MyLayoutrun()这样的一维命名方式。这样层次一目了然。让我们再增加一个子类，就会了解这其中的奥秘了。

var My = {
    run: function() {
         //just do something....
         alert('你好，死猪！');
         My.Layout.run();
         My.Panel.run();
    }
};
My.Layout = {
    run: function() {
         alert('您又便秘啦？');
    }
};
My.Panel = {
    run: function() {
         alert('死了算了=，=');
    }
};

这个感觉就像是一台机器一样，显示我打开的开关，机器开始启动，初始化了一些初始操作触发了显示模块，然后再做通用模块的操作。 一切都是有秩序的在执行着。很有感觉吧？^_^ 继续

var My = {
    run: function() {
         this.root = {};
         this.root.head = $('#head');
         this.root.main = $('#main');
         var root= this.root;
         My.Layout.run(root);
         My.Panel.run(root);
    }
};
My.Layout = {
    run: function(root) {
         this.root = root;
         thit._init_resize()
    },
    _init_resize: function() {
         alert('您又便秘啦？' + this.root.main.text());
    }
};
My.Panel = {
    run: function() {
         alert('死了算了=，=');
    }
};

这一步是亮点，我将一些需要全局用到的对象打包成一个root之类，然后带入到每个其他子类中，这样就可以访问到这些对象，而不需要另外再申明，(我不知道这样子做能够节省内存开销，还是会浪费，但感觉应该是前者)
这样子的写法，让整个js 系统被一些关系连接在一起，但是又很容易切开，(比如：注释掉My.Panel.run(root) 就能关闭整个Panel 功能，就像一个一个小插件一样)。

扯得优点离题了，其实也不离题啦，这样子写本来就很难产生命名冲突，并且命名规则可以很有秩序，并且不会出现非常长的纠结的名称。

您可能还对这些日志感兴趣

• 闭包式 js架构 前端书写心得(上)
• 三元运算符 使用小技巧一则 – javascript
• 神经特长 – lazy hover 延迟激活jquery 插件
• 走马观花 – jQuery调试工具- jQuery pad
• 隔山打牛 – jQuery中 trigger() & bind() 使用心得 (二)

闲话少说：
下载地址：传送门 – 这个是小众软件上的，感谢小众哥哥，感谢C-C-A-V。
工具配置要求：
该软件需要 .NET Framework 3.5 运行环境，就像一朵鲜花插在牛粪上，又臭又香。
win7就不用麻烦了，系统自带，叉p的童鞋就折腾去吧。

使用方法：
左边写dom，右边写jquery 代码(注意：没有意外，要包个$(document).ready()，因为导出来的代码js部分是在头部。 )

好吧~ 玩泥巴去吧~ 不要忘了喊，飞鱼万岁~~~ 小众哥哥万万岁~~~

您可能还对这些日志感兴趣

• 闭包式 js架构 前端书写心得(上)
• 三元运算符 使用小技巧一则 – javascript
• 神经特长 – lazy hover 延迟激活jquery 插件
• 系统级应用项目中的函数命名冲突问题
• 隔山打牛 – jQuery中 trigger() & bind() 使用心得 (二)

bind() 绑定事件

if 你看过jquery里bind 绑定事件的解释，那基本不用看这篇文章了。 return false
else go on

称为绑定事件，字面意思应该是 绑定在其他事件上的事件。

$(function() {
	var div = $("#mybutton"); //你的按钮。
	div.click(function(e,text) {
		var text = text || '你是猪啊，~让你点，你就点？';
		alert(text);
	});

        div.bind('click', function() {
            alert("兄弟，没事不要乱点; ");
        });
});

上面的代码就是给div的click事件绑定了一个事件。猜猜看哪个先执行？
当按钮被点击的时候，先执行完click事件后，再执行绑定的事件。

bind() 绑定 自定义事件

说绑定自定义事件的时候先说一下 什么是自定义事件？
trigger()方法是用来触发一些事件型方法，如：

div.trigger('click', [text]);

上面的click 是不是一定要规定的 click，focus等事件型方法嘞？答案是可以触发任何事件。如：

div.trigger('my_action', [text]);

你可以尝试一下，发现firebug 没有报错，说明没有问题，只是这个my_action 事件什么都没做而已。为什么不报错，这个我还在研究，谁知道的告诉我 -，-
从这一点看trigger 方法一定是在找 my_action 事件。突然有个idea，既然bind 是绑定事件，既然 my_action 事件什么事情都没做，那我就给它bind 绑定个事件上去不就可以了。于是乎····竟然可以~~

$(function() {
	var div = $("#mybutton"); //你的按钮。
	div.bind('my_action', function(e, text) {
            var text = text || ' oh yah, 观 音 坐 莲';
            alert(text);
        });
	div.trigger('my_action');
}); 

隔山打牛

那么何为隔山打牛呢？
听我慢慢银荡过来~~~
比如我们有两个盒子，希望点击按钮让 第二个盒子显示第一个盒子里的内容。
平常我们会这样写：

$(function() {
	var div = $("#mybutton"); //你的按钮。
	var box1= $("#mybox1");
	var box2= $("#mybox2");
	div.click(function() {
             var text = box2.val();
             box1.val(text);
        });
}); 

利用bind 和 trigger 我们可以这样写。

$(function() {
	var div = $("#mybutton"); //你的按钮。
	var box1= $("#mybox1");
	var box2= $("#mybox2");

	div.bind('my_action', function(e, text) {
             var text = box1.val();
             box2.val(text);
        });

	div.click(function() {
	    $(this).trigger('my_action');
        });

}); 

这样写的好处，在以后会慢慢体现，比如你想双击的时候也想 有这样的动作的时候 ：只需要在后面加：

	div.dblclick(function() {
	    $(this).trigger('my_action');
        });

甚至你想在点击后想把第一个盒子消失，只需要在后面再加上

	div.bind('my_action', function(e, text) {
             box1.hide();
        });

这样的好处是，当click事件要处理的事情变多的时候，能将处理的事情进行分类，让代码更加有层次。而不是臃肿的click function。
更神奇的是这样写 bind 事件甚至可以分开存在不同的js 文件 在需要的时候调用，让它变成一个组件形式。
是不是有一种隔山打牛的感觉？

您可能还对这些日志感兴趣

• 闭包式 js架构 前端书写心得(上)
• 三元运算符 使用小技巧一则 – javascript
• 神经特长 – lazy hover 延迟激活jquery 插件
• 系统级应用项目中的函数命名冲突问题
• 走马观花 – jQuery调试工具- jQuery pad

trigger() 触发事件

这个方法是jQuery 1.3中新增的一个引起触发事件的函数。具体解释可以去这里下载 最新的jquery 手册查一下，里面解释的很清楚，就是字有点多。
如果你比较懒那么我稍微解释一下这个东东。我也是挂羊头卖狗肉 =，=
触发事件就是 类似于点击click, mouseover, keydown 等有动作的js事件，简单的说就是一个动作，可能有人会问，那show, hide 是不是? 不是，show 这 效果，手册里刚打开的速查页面里的事件类目就是上面所说的触发事件
说了这么多，还没切到主题，=，=我就这样 ，容易跑题，大伙看习惯了就好。

为什么要用 trigger() ？

比如：你给一个按钮添加了一个click点击事件，弹出提示框，代码如下。

var div = $("#mybutton"); //你的按钮。
div.click(function() {
    alert('你是猪啊，~让你点，你就点？');
});

上面的代码就是一个按钮的click事件。这个时候你有个非分的要求，就是希望页面刷新的时候就点一下这个按钮。如果不用trigger()你可以在后面这样写：

div.click();

如果用trigger()，你就要写成这样：效果跟上面这句是一样，就是稍微长点。

div.trigger("click");

然后有人说：你是猪啊·~~ 上面这个短一点，你还教我用下面这个 =，=
表急着揍我么~· 继续往下看。

你用手册 里的索引搜一下click 可以看到 两条 结果 click() 和，click(fn)，然后 搜一下trigger 发现只有一个 trigger(type, [data]) 。
然后你知道我的意思了吧。— trigger 可以传参数进去。
我们看看 手册里的trigger 例子：

$("p").click( function (event, a, b) {
  // 一个普通的点击事件时，a和b是undefined类型
  // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);

了解了吧？如果用click 的话，它不吃参数，用trigger的话，就能吃了。
练习一下吧：黏贴到你的页面上试试看，记得把jquery载进来。

$(function() {
	var div = $("#mybutton"); //你的按钮。
	div.click(function(e,text) {
		var text = text || '你是猪啊，~让你点，你就点？';
		alert(text);
	});
	div.trigger("click","您好，请点击按钮");
});

您可能还对这些日志感兴趣

• 闭包式 js架构 前端书写心得(上)
• 三元运算符 使用小技巧一则 – javascript
• 神经特长 – lazy hover 延迟激活jquery 插件
• 系统级应用项目中的函数命名冲突问题
• 走马观花 – jQuery调试工具- jQuery pad

jQuery图片轮播插件

作者：飞鱼
制作工具：notpad++
使用语言：javascript
最近写的这个图片轮播插件，于是乎拿出来晒晒，分享点菜鸟心得。大虾可以旁观^_^

功能描述

就是一个简单的js轮播，第一张图变白，然后切换成第二张图。鼠标放上去后图片不切换，移开又开始了。 可以给组图片加效果，并且不冲突。
有空补一下 代码注释，以及 setInterval 的应用

演示效果图

演示地址： 跳转地址

js 代码

(function($) {
  $.fn.fadPicture = function(d) {
    var df = 3000;
    delay = d ? (d < df ? df : d) : df;
    $(this).each(function(i){
      var t = $(this),
        mc = function(){
          var  ul = t,
            first = ul.find('li:first');
          ul.fadeOut('show',
            function(){
              first.appendTo(ul);
            }
          );
          ul.fadeIn();
        };
      var interval = setInterval(function(){
        mc();
      }, delay);
      t.hover(
        function(){
          clearInterval(interval);
          t.data('start',false);
        },
        function(){
          interval = setInterval(function(){
            mc();
          }, delay);
        }
      );
    });
  };
})(jQuery);

使用方法

$(document).ready(function(){
  $('.fadPicture').fadPicture();
  // $('.fadPicture').fadPicture(5000);  //时间5秒
});

html写法

<ul class="fadPicture">
      <li><img src="http://001.jpg" alt="001" /></li>
      <li><img src="http://002.jpg" alt="001" /></li>
      <li><img src="http://003.jpg" alt="001" /></li>
    </ul>

您可能还对这些日志感兴趣

• 发现一个jQuery初学者的天堂
• 闭包式 js架构 前端书写心得(上)
• 三元运算符 使用小技巧一则 – javascript
• 神经特长 – lazy hover 延迟激活jquery 插件
• 乱翻乱教 – M8开发环境(vs2008)配置 [菜鸟版]

于是乎，向笨笨先生(我哥)讨教了几番，得出了这么一个jquery menu 插件。代码依然很简单，稍微复杂点，可以在按钮放上去的时候触发一个动画效果，离开也可以触发一个动画效果，还添加了延迟释放效果(鼠标移开后有个缓冲，再消失)

代码如下：

(function($) { //N级导航插件
  $.fn.menu = function(options) {
    options = $.extend({
      delay: false
    }, options);

    this.find('li:has(ul)').hover(
      function() {
        var t = $(this);
        t.data('hide_menu', false);
        t.find('>ul').css('display', 'block'); // 可以换成动画效果
      },

      function() {
        var t = $(this);
        t.data('hide_menu', true);
        var hide_menu = function() {
          if (t.data('hide_menu')) {
            t.find('>ul').css('display', 'none'); // 可以换成动画效果
          }
        };
        options.delay ? setTimeout(hide_menu, options.delay)
            : hide_menu();
      }
    );
  };
})(jQuery);

代码非常简练，可以根据实际需求增加其他效果。
使用方法如下：

jQuery(function($) {  //调用插件
  //$('.menu').menu() //默认调用语法;
  $('.menu').menu({delay: 500}); //延迟500ms释放
})

PS：演示地址

您可能还对这些日志感兴趣

• 闭包式 js架构 前端书写心得(上)
• 三元运算符 使用小技巧一则 – javascript
• 神经特长 – lazy hover 延迟激活jquery 插件
• 系统级应用项目中的函数命名冲突问题
• 走马观花 – jQuery调试工具- jQuery pad

jQuery 制作仿DNF首页导航菜单效果

作者：飞鱼原创
飞鱼: 偶然发现这个东东很实用，就手把手写了个。
DNF首页的那只导航，似乎纯手写的。我这次要写的是用jquery来制作，制作代码非常极其简单，看了就知道怎么做(老鸟可以绕过哈，谁让咱们都是菜鸟 = =)

最终效果图

支持N级导航(添加子导航无需另外添加代码)。

html代码

首先当然是html啦，代码如下，没有什么技术含量，

<div class="menu" >
    <ul>
      <li>
        <a href="#">游戏介绍</a>
        <ul>
          <li><a href="#">升级体验</a></li>
          <li class="sub">
            <a href="#">游戏2</a>
            <ul>
              <li><a href="#">天赋系统</a></li>
              <li><a href="#">升级体验</a></li>
            </ul>
          </li>
          <li><a href="#">故事背景</a></li>
          <li><a href="#">职业介绍</a></li>
        </ul>
      </li>
      <li><a href="#">天赋系统</a></li>
    </ul>
  </div>

css代码

因为是仿dnf官方首页导航，所以样式也多少参考了一下它的样式，(图片我也给扣过来了 嘎嘎)

.menu{
  height:27px;
  float:left;
  background:#1d1d1d url(http://ossweb-img.qq.com/images/dnf/web200812/box_bg1.gif) repeat;
  border:2px solid #000;
}
.menu ul{
    border:1px solid #3f3f37;
    height:25px;
    float:left;
}
.menu li{
  float:left;
  position:relative;
  text-align:center;
  width:70px;
  background:url(http://ossweb-img.qq.com/images/dnf/web200812/img.gif) no-repeat -480px 9px;
}
.menu li .sub{
  background:url(http://ossweb-img.qq.com/images/dnf/web200812/img.gif) no-repeat -420px 9px;
}
.menu li a{
  color:#b29056;
  display:block;
  height:25px;
  line-height:25px;
}
  .menu li a:hover{
    color:#fff;
    text-decoration:none;
  }
  .menu li ul{
    position:absolute;
    top:25px;
    left:-1px;
    display:none;
    width:68px;
    height:auto;
    float:none;
    border-bottom:none;
    background:#1d1d1d url(http://ossweb-img.qq.com/images/dnf/web200812/box_bg1.gif) repeat;
  }
  .menu li ul a{
    display:block;
    height:25px;
    line-height:25px;
  }
    .menu li ul a:hover{
      background:#070707 url(http://ossweb-img.qq.com/images/dnf/web200812/r_linkbg.gif) repeat;
    }
  .menu li ul li{
    position:relative;
    width:68px;
    border-bottom:1px solid #3f3f37;
    background:none;
  }
  .menu li li ul{
    position:absolute;
    top:-1px;
    left:68px;
  }

js代码

这个代码，可以说是相当滴简单，只用了一只语法(.hover)。
说明一下代码的用处细节：(菜鸟专用，老鸟请跨过去 = =)

$(document).ready(function(){
  $('.menu li').hover(  //给menu 下的所有li 添加 hover 动作
    function () {   //鼠标在li 上时让 li 下的ul 显示出来
      $(this).children('ul:first').css('display', 'block');
    },
    function () {  //鼠标在离开li 上时让 li 下的ul 隐藏掉
      $(this).children('ul:first').css('display', 'none');
    }
  );
});

上面代码中我用:first 来只取第一个来提高效率(不知道我这样做对不对，感觉上应该是对的 – -)。

PS：代码演示，因为最近用的都不是自个儿的电脑，FTP上不去，就委曲下自己 尝试一下呢，效果还是不错的。

PS2：可以在这基础上增加其他功能：比如鼠标离开后，过半秒中导航才消失，这个需要用到setTimeout 函数来解决。有空我写个。^_^

您可能还对这些日志感兴趣

• 闭包式 js架构 前端书写心得(上)
• 菜鸟级: 标签切换效果 – JQuery实现
• 滚动新闻 – jquery 扩展插件
• 三元运算符 使用小技巧一则 – javascript
• 神经特长 – lazy hover 延迟激活jquery 插件