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>
结果图如下所示：
spin.js插件的转圈加载效果的更多相关文章
- js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...
- js插件---图片懒加载lazyload
js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...
- dropload.js（上拉加载插件使用过程中遇到的坑）
dropload.js相关介绍和使用以及demo下载详见:https://github.com/ximan/dropload (原文出处) 之前因为项目需要一个上拉加载的效果,然后无意中看到了此插件, ...
- 分享JQuery动画插件Velocity.js的六种列表加载特效
分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览 源码下载 实现 ...
- [js开源组件开发]loading加载效果
loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...
- js图片加载效果（延迟加载+瀑布流加载）
概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...
- js实现瀑布流加载图片效果
今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...
- 使用 SVG 实现一个漂亮的页面预加载效果
今天我们要为您展示如何使用 CSS 动画, SVG 和 JavaScript 创建一个简单的页面预加载效果.对于网站来说,这些预载入得画面提供了一种创造性的方法,使用户在等待内容加载的时候不会那么无聊 ...
- 【转】JS判断SWF,JPG加载完毕、兼容（Activex,plugIn）所有浏览器
JS判断SWF,JPG加载完毕.兼容(Activex,plugIn)所有浏览器 这里主要说下监听SWF的加载. 网上流传已久的监听方法,只能在IE(Activex插件下)下实现.在使用plugin的浏 ...
随机推荐
- B树，B-树，B+树，B*树
B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如: B ...
- Linux安装Git
(1)下载git压缩文件,使用当前的用户yum安装git,先下载再安装,其中有一次需要输入Y sudo yum install git-all 服务器回应,其实除了安装git之外,也会安装其他需要的依 ...
- tomcat install on Linux
1)下载apache-tomcat-6.0.10.tar.gz 2)#tar -zxvf apache-tomcat-6.0.10.tar.gz ://解压 3)#cp -R apache-tomca ...
- linux_tomcat7服务器日志爆满导致java崩溃的问题
在linux服务器上部署Tomcat后,运行久了,catalina.out文件会越来越大,对系统的稳定造成了一定的影响. 最近刚刚出现了某台linux服务器上的java应用都假死或挂掉 然后我在输入命 ...
- NYOJ 38 布线问题_(解法2 Prim算法)
时间限制:1000 ms | 内存限制:65535 KB 难度:4 描写叙述 南阳理工学院要进行用电线路改造.如今校长要求设计师设计出一种布线方式.该布线方式须要满足下面条件: 1.把全部的楼都供 ...
- sift算法c语言实现
前段时间在做三维測量方面的研究.须要得到物体表面三维数据.sift算法是立体匹配中的经典算法.以下是对RobHess的SIFT源码的凝视.部分内容參考网上,在这里向各位大神表示感谢. http://b ...
- 两款Mac下的视频下载利器
1 iSkysoft iTube Studio 2.jaksta mac
- Cocos2d-x中获取设备语言的方法
1.cocos2dx获取设备语言的方法:CCApplication::sharedApplication()->getCurrentLanguage() 2.cocos2dx 2.1.4支持识别 ...
- CHENEY-YANG'S BLOG(cheney-yang)
This is Cheney-Yang's blog ! Welcome to here ! This is Cheney-Yang's blog ! Welcome to here ! This i ...
- springmvc使用@ResponseBody返回json乱码解决方法
1.springmvc 3.2以上的版本解决乱码的方法: 第一步:在配置中加入: <mvc:annotation-driven> <mvc:message-converters re ...