spin.js插件的转圈加载效果

先上插件链接地址：http://fgnass.github.io/spin.js/

以下是使用spin.js插件的完整版测试例子：

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test_storage</title>
<script type="text/javascript" src="spin.min.js"></script>
<script type="text/javascript">
window.onload = function(){
    var opts = {
  lines: 13, // The number of lines to draw |小长条的数量
  length: 13, // The length of each line |小长条的长度
  width: 3, // The line thickness |小长条的宽度
  radius: 15, // The radius of the inner circle |内环的半径长
  corners: 1, // Corner roundness (0..1)
  rotate: 0, // The rotation offset |旋转角度
  direction: 1, // 1: clockwise, -1: counterclockwise |1：顺时针方向 -1：逆时针方向
  color: '#000', // #rgb or #rrggbb or array of colors |颜色
  speed: 1, // Rounds per second |每秒转多少圈
  trail: 60, // Afterglow percentage |余晖效果百分比
  shadow: false, // Whether to render a shadow |渲染阴影
  hwaccel: false, // Whether to use hardware acceleration |加速
  className: 'spinner', // The CSS class to assign to the spinner |类名spinner
  zIndex: 2e9, // The z-index (defaults to 2000000000) |显示在最顶层
  top: 'auto', // Top position relative to parent in px |相对父元素的top
  left: 'auto' // Left position relative to parent in px |相对父元素的left ，默认情况spinner是显示于父元素居中位置

};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);//给id为foo的div 中绑上spinner

//或者使用spinner.el属性插入DOM /* 如下 */
/*var spinner = new Spinner().spin();
target.appendChild(spinner.el);*/

//spinner.stop();//用来移除spinner，停止动画
} </script> </head> <body> <div id="foo" style="height:100px;"></div> </body> </html>

结果图如下所示：

posted @ 2013-11-12 20:14  luella  Views(2248)  Comments(0)    收藏  举报