用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>
其实就是这么的简单。
还看了一些面向对象的编程方式，感觉有点鸡肋，所以没尝试。可能是自己的水平认知达不到那个高度吧。
以后会尝试把复杂效果改成插件。
原文：http://www.cnblogs.com/simao/p/7230245.html