开发jquery插件小结

Posted 2020-09-29 前端乐园

用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>

 

其实就是这么的简单。

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

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