转载文章:前端新兵
看到Spin官网的介绍:Uses VML as fallback in IEs,说是老的IE使用VML制作效果,IE6也支持,不过网上搜了一下VML,都推荐使用SVG了,IE10已经不支持VML,不过不管这些,我们要的就是加载的效果。
我们通常制作加载的动画效果都是使用一个gif的动态图片,来实现动态加载的效果,提高用户体验。而使用Spin这个js插件,就是什么也不用,只用js或是浏览器支持的技术来实现加载效果,可以看一下下面的效果:
上面的例子就是显示加载动画和删除加载动画的例子,不多说,直接上例子,最能帮助理解:
<script type="text/javascript" src="spin.js"></script>
<div id="foo" style="width:100%;height:100px;border:1px dotted #a0a0a0;"></div>
<p>
<button onclick = "startspin()">显示加载</button>
<button onclick = "stopspin()">停止加载</button>
</p>
<script type="text/javascript">
var opts = {
lines: 10, // 画线的数量
length: 5, // 每条线的长度
width: 5, // 线的厚度
radius: 10, // 内圆的半径
corners: 1, // 角的圆度 (0..1)
rotate: 0, // 旋转的偏移
direction: 1, // 1: 顺时针, -1: 逆时针
color: '#000', // #rgb 或 #rrggbb or 颜色数组
speed: 1, // 每秒的旋转圈数
trail: 100, // 旋转余晖的百分比
shadow: false, // 是否显示阴影
hwaccel: false, // 是否使用硬件加速
className: 'spinner', // 定义spinner的css类名
position:'relative', // 定义spinner的位置类型,和css里的position一样
zIndex: 2e9, // The z-index (默认是 2000000000)
top: '50%', // 相对于父元素的顶部偏移量
left: '50%' // 相对于父元素的左部偏移量
};
var target = document.getElementById("foo");
var spinner = new Spinner(opts);
spinner.spin(target);
function startspin(){
spinner.spin(target);
}
function stopspin(){
spinner.stop();
}
</script>
去看看演示: 演示地址