用jquery開發插件其實很簡單。今天實現了一個入門級別的功能。

隨便來個DIV，便於理解。

    div{
        height:100px;width:100px;display:block;background:#f00;border-radius:50%;text-align:center;

    }

這個玩意的功能也很常見，CSS3的旋轉，鼠標放上去他能轉，度數，速度都是參數。坦白將這個項目沒多大卵用，CSS hover就能實現，雖然多了會寫的麻煩，畢竟練手項目，第一個插件，不能要求太高。

上代碼：

 1 <script type="text/javascript" src="js/jquery1.91.min.js"></script>
 2
 
 <script>
 4 $.fn.rotate=function(options){
 6 
 7         var defaults={//默認參數
 8 
 9             ‘rotate‘:‘90‘,
10             ‘transition‘:‘0.1s‘
11         };
12 
13         var settings=$.extend({},defaults,options);//合並參數    ｛｝防覆蓋
14 
15         return this.css({
16             ‘transition‘:settings.transition,
 
17             ‘transform‘:‘rotate(‘+settings.rotate+‘deg)‘
18         });
19 
20 }
21 
22 
23 
24 
25    $(function(){
26 
27         $(‘div‘).hover(function(){
28 
29            $(this).stop().rotate({
30              transition:‘0.4s‘,
31              rotate:360
32 
33 
34            });
35 
36         },function
 
(){
37 
38           $(this).stop().rotate({
39             transition:‘0s‘,
40               rotate:0
41           });
42 
43         });
44       
45    });
46 
47 
48     </script>

其實就是這麽的簡單。

還看了一些面向對象的編程方式，感覺有點雞肋，所以沒嘗試。可能是自己的水平認知達不到那個高度吧。

以後會嘗試把復雜效果改成插件。

開發jquery插件小結