开发jquery插件小结

用jquery开发插件其实很简单。今天实现了一个入门级别的功能。

随便来个DIV，便于理解。

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

    }

这个玩意的功能也很常见，CSS3的旋转，鼠标放上去他能转，度数，速度都是参数。坦白将这个项目没多大卵用，CSS  hover就能实现，虽然多了会写的麻烦，毕竟练手项目，第一个插件，不能要求太高。

上代码：

 <script type="text/javascript" src="js/jquery1.91.min.js"></script>
 <script>
 $.fn.rotate=function(options){

         var defaults={//默认参数

             'rotate':'90',
             'transition':'0.1s'
         };

         var settings=$.extend({},defaults,options);//合并参数    ｛｝防覆盖

         return this.css({
             'transition':settings.transition,
             'transform':'rotate('+settings.rotate+'deg)'
         });

 }

    $(function(){

         $('div').hover(function(){

            $(this).stop().rotate({
              transition:'0.4s',
              rotate:360

            });

         },function(){

           $(this).stop().rotate({
             transition:'0s',
               rotate:0
           });

         });

    });

     </script>

其实就是这么的简单。

还看了一些面向对象的编程方式，感觉有点鸡肋，所以没尝试。可能是自己的水平认知达不到那个高度吧。

以后会尝试把复杂效果改成插件。