首页 > 代码库 > 开发jquery插件小结
开发jquery插件小结
用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="http://www.mamicode.com/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插件小结
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。