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+