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的浏 ...
随机推荐
- SRM 447(1-250pt, 1-500pt)
DIV1 250 水题...略. DIV1 500 抽象题意:有一个图,指定其中亮点p1和p2,删掉途中其他的一些点,使得p1和p2最短路大于3. 解法:使得p1和p2最短路为2的点一定要删掉.然后, ...
- hdoj 2074 叠筐
叠筐 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...
- javascript如何监听页面刷新和页面关闭事件
本文转之http://www.qqtimezone.top 在我们的日常生活中,时常遇到这么一种情况,当我们在点击一个链接.关闭页面.表单提交时等情况,会提示我们是否确认该操作等信息. 这里就给大家讲 ...
- onethink对二维数组结果集进行排序
<?php /** * 对查询结果集进行排序 * @access public * @param array $list 查询结果 * @param string $field 排序的字段名 * ...
- php如何修改SESSION的生存时间
如何修改SESSION的生存时间 我们来手动设置 Session 的生存期: <?phpsession_start(); // 保存一天 $lifeTime = 24 * 3600; setco ...
- Ajax交互demo1
一.概念 Ajax异步请求刷新. 浏览器在用户不知道的情况下,偷偷地跟服务器交互,然后返回数据给浏览器显示. 异步过程:当HTTP请求发送后,通过Ajax技术使用的XMLHttpRequest对象来发 ...
- PAT---1013. Battle Over Cities (25)
这道题目的意思是:在战争时代,如果一个城市被敌人占领了,那么和该城市相连的道路都必须关闭,我们必须把剩下的城市(即不包括被敌人占领的城市)连接起来. 举个例子,我们有3个城市,C1,C2,C3,C1和 ...
- Servlet配置文件
<url-pattern>/servlet/demo</url-pattern> 1.以 / 开头, /代表工程路径:(必须要加 / ) 2.以 * 开头,必须加后缀名 /* ...
- HDU2054JAVA
(包括2016级新生)除了校赛,还有什么途径可以申请加入ACM校队? A == B ? Time Limit: 1000/1000 MS (Java/Others) Memory Limit: ...
- Struts工作流程
Java Web 都是使用线程来处理用户的请求(request)的,一次请求对应一个处理线程.Struts 2会为每个处理线程分配一个Action对象, 将提交的参数注射到Action属性中,并调用A ...