依然上班中，写个图片透明度jQuery插件
Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种 应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插 入一堆js来调用命令了，只需定义id即可。
最近都更新到1.7.1。好神速呐。
以前都是用人家的插件的，今天写个自己的简单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://www.cnblogs.com/divcss/
* Date: 2012-01-18
* 使用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，
<html>
<head>
<title>使用flickering可以方便地将鼠标移动到图片时透明度提高，移除透明度降低，突出鼠标放在那个图片的亮度</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
body,div,a,img{margin:0;padding:0}
img{border:0 none}
.box{width:960px;float:left;}
.box a{float:left;display:block}
.box a img{display:block}
.hover{opacity: 0.70;XImageTransform.Microsoft.Alpha(style=0,opacity=70,finishOpacity=70);filter:alpha(opacity=70)}
</style>
</head>
<body>
<div class="box">
<a href="" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/divcss/349452/r_1.jpg" alt="" title=""></a>
<a href="" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/divcss/349452/r_2.jpg" alt="" title=""></a>
<a href="" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/divcss/349452/r_3.jpg" alt="" title=""></a>
<a href="" target="_blank"><img src="http://images.cnblogs.com/cnblogs_com/divcss/349452/r_4.jpg" alt="" title=""></a>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://files.cnblogs.com/divcss/jquery.hover.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".box").flickering();
})
</script>
</body>
</html>
9，第一次写jquery插件，好多不足，各位多提建议，多谢。
10，最后祝大家龙年快乐，工作顺利。
