wid tin 第一个 for play ack bsp form
用 jquery 开发插件其实很简单。今天实现了一个入门级别的功能。
随便来个 DIV,便于理解。
- div {
- height: 100px;
- width: 100px;
- display: block;
- background: #f00;
- border - radius: 50 % ;
- text - align: center;
- }
这个玩意的功能也很常见,CSS3 的旋转,鼠标放上去他能转,度数,速度都是参数。坦白将这个项目没多大卵用,CSS hover 就能实现,虽然多了会写的麻烦,毕竟练手项目,第一个插件,不能要求太高。
上代码:
- 4 $.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
- });
- });
- });
其实就是这么的简单。
还看了一些面向对象的编程方式,感觉有点鸡肋,所以没尝试。可能是自己的水平认知达不到那个高度吧。
以后会尝试把复杂效果改成插件。
开发 jquery 插件小结
来源: http://www.bubuko.com/infodetail-2225710.html