spin.js 简易文档

spin.js是什么？说白了就是一个loading时的菊花图案。

官方的地址是：http://fgnass.github.com/spin.js/

特点：
+ 不含图片，无需外接CSS文件
+ 原生JavaScript，不依赖任何库
+ 可配置性高
+ 没有分辨率限制
+ 对旧版IE通过VML实现
+ 使用@keyframe实现动画，用setTimeout()对下兼容
+ 能运行在所有主流浏览器上，包含IE6
+ MIT许可证

使用方法：

var opts = {
  lines: 17, // 菊花瓣的数目
  length: 7, // 菊花瓣的长度
  width: 4, // 菊花瓣的宽度
  radius: 10, // 菊花中心的半径
  corners: 1, // 菊花瓣的圆滑度(0--1)
  rotate: 0, // 让菊花旋转的角度
  color: '#000', // 菊花的颜色
  speed: 1.6, // 菊花旋转的速度
  trail: 58, // 菊花旋转时的余辉
  shadow: false, // 是否需要菊花的阴影
  hwaccel: false, // 是否需要菊花高速旋转(硬件加速)
  className: 'spinner', // 菊花的classname
  zIndex: 2e9, // 菊花的z-index值
  top: 'auto', // 菊花相对定位的top
  left: 'auto' // 菊花相对定位的left
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);

spin()方法用于指定HTML对象容器和执行动画。

菊花插入为容器的第一个子元素，并且垂直居中于这个容器。

上面提到的方法，是默认情况。

当然我们也可以更自由的操纵菊花的插入。

var spinner = new Spinner().spin();
target.appendChild(spinner.el);

用这种方法插入的菊花，就比较简洁，没有设置top和left样式。

隐藏spinner：

直接使用stop()方法，就可以去掉页面上的菊花了。

但还是可以通过spin()方法来重新插入菊花。

jQuery插件：

如果你真的那么热爱jQuery，就加入下面的代码制作成jQuery插件吧。

$.fn.spin = function(opts) {
  this.each(function() {
    var $this = $(this),
        data = $this.data();

    if (data.spinner) {
      data.spinner.stop();
      delete data.spinner;
    }
    if (opts !== false) {
      data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
    }
  });
  return this;
};

支持的浏览器:
+ Chrome
+ Safari 3.2+
+ Firefox 3.5+
+ IE 6,7,8,9
+ Opera 10.6+
+ Mobile Safari (iOS 3.1+)
+ Android 2.3+