用jquery好久了,平时注重速度,兼容的,用人家网上共享的插件多。

今天晚上就自己写个插件吧,便于以后方便查阅。
1,首先得想好需要什么功能,想实现神马?
最近逛淘宝商城,哦不,现在该叫天猫了,真不习惯啊,原来名字好好,改什么嘛。
刚写Jquery也不好写太复杂的,选个简单的,看中那天猫中的鼠标移动到图片那边透明度提高,移除图片透明降低,那个吧。
2,需要用到什么属性呢?
css需要opacity
javascript需要hover
3,人家的插件都有一个固定的框架,咱拿来吧
(function($){
$.fn.yourName = function(options){ 
//各种属性、参数 
var options = $.extend(defaults, options); 
this.each(function(){ 
//插件实现代码 
});
};
})(jQuery);
4,写参数,名称,
神马东东都得有个名字,才好方便,大家查找吧。So,就叫flickering吧。现在只是练手,不过多纠结名称了,想太多太纠结了。
参数属性就是加上class名称 hoverClass
5,开始套那个模版吧
(function($){
$.fn.flickering = function(options){
var defaults = {
hoverClass:"hover"
}
var options = $.extend(defaults, options);
this.each(function(){
//实现代码
});
};
})(jQuery);
6,下面就是jquery编写了,用到hover,addclass,removeclass,不熟悉可以参考jQuery API
(function($){
$.fn.flickering = function(options){ 
var defaults = { 
hoverClass:"hover" 
var options = $.extend(defaults, options); 
this.each(function(){ 
var thisTable=$(this);
$(thisTable).find("img").hover(
function(){
$(this).addClass(options.hoverClass);
},
function(){
$(this).removeClass(options.hoverClass);
}
); 
}); 
}; 
})(jQuery);
7,呵呵,可以实现了吧。JQuery插件好了,其实还木有哦,我们看其他人家编写的插件,还有相关信息哦,比如名称版本 作者,我也弄吧,向网上大牛们靠近/*
* flickering 0.1
* Copyright (c) 2012 天外飞仙  http://jqueryba.com/
* Date: 2012-03-21 22:32
* 使用flickering可以方便地将鼠标移动到图片时透明度提高,移除透明度降低,突出鼠标放在那个图片的亮度
*/
(function($){
$.fn.flickering = function(options){
var defaults = {
hoverClass:"hover"
}
var options = $.extend(defaults, options);
this.each(function(){
var thisTable=$(this);
$(thisTable).find("img").hover(
function(){
$(this).addClass(options.hoverClass);
},
function(){
$(this).removeClass(options.hoverClass);
}
);
});
};
})(jQuery);
8,第一次在这里写插件,有些理解的不深,包涵。
flickering插件地址
在线效果DEMO
 
原文地址 前端开发 http://www.jqueryba.com/167.html