开发jquery插件小结 猫

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

随便来个DIV，便于理解。

    div{
        height:100px;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>

其实就是这么的简单。

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

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