利用 spin.js 生成等待效果(js 等待效果)


Posted in Javascript onJune 25, 2017

利用 js 生成一个界面友好的等待效果,使用 jquery 插件 spin.js,文章末尾有下载地址,下图是生成的效果截图,代码调用很简单。

利用 spin.js 生成等待效果(js 等待效果)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
 font-family: Helvetica, Arial, sans-serif; font-size: 12px;
}
#preview1 {
 float: left; position: relative; background-color: #000; color: black; width: 220px; height: 220px; margin: 0 5px; border-radius: 20px;
}
#preview2 {
 float: left; position: relative; background-color: #000; color: black; width: 220px; height: 220px; margin: 0 5px; border-radius: 20px;
}
</style>
<script src="jquery.min.js"></script>
<script src="spin.js"></script>
<script src="jquery.spin.js"></script>
<script type="text/javascript">
 // 对样式 #preview1 进行配置
 var opts1 =
 {
 lines : 12, // The number of lines to draw
 length : 0, // The length of each line
 width : 11, // The line thickness
 radius : 40, // The radius of the inner circle
 scale : 1.0, // Scales overall size of the spinner
 corners : 0, // Roundness (0..1)
 color : '#efefef', // #rgb or #rrggbb
 opacity : 1 / 4, // Opacity of the lines
 rotate : 0, // Rotation offset
 direction : 1, // 1: clockwise, -1: counterclockwise
 speed : 1, // Rounds per second
 trail : 100, // Afterglow percentage
 fps : 20, // Frames per second when using setTimeout()
 zIndex : 2e9, // Use a high z-index by default
 className : 'spinner', // CSS class to assign to the element
 top : '50%', // center vertically
 left : '50%', // center horizontally
 shadow : false, // Whether to render a shadow
 hwaccel : false, // Whether to use hardware acceleration (might be buggy)
 position : 'absolute' // Element positioning
 };
 // 对样式 #preview2 进行配置
 var opts2 =
 {
 lines : 18, // The number of lines to draw
 length : 0, // The length of each line
 width : 11, // The line thickness
 radius : 40, // The radius of the inner circle
 scale : 1.0, // Scales overall size of the spinner
 corners : 0, // Roundness (0..1)
 color : 'red', // #rgb or #rrggbb
 opacity : 1 / 4, // Opacity of the lines
 rotate : 0, // Rotation offset
 direction : 1, // 1: clockwise, -1: counterclockwise
 speed : 1, // Rounds per second
 trail : 100, // Afterglow percentage
 fps : 20, // Frames per second when using setTimeout()
 zIndex : 2e9, // Use a high z-index by default
 className : 'spinner', // CSS class to assign to the element
 top : '50%', // center vertically
 left : '50%', // center horizontally
 shadow : false, // Whether to render a shadow
 hwaccel : false, // Whether to use hardware acceleration (might be buggy)
 position : 'absolute' // Element positioning
 };
</script>
<title>Insert title here</title>
</head>
<body>
 <div id="preview1" class="preview"></div>
 <div id="preview2" class="preview"></div>
</body>
<script type="text/javascript">
 $('#preview1').spin(opts1);
 $('#preview2').spin(opts2);
</script>
</html>

插件下载地址

https://github.com/fgnass/spin.js/

http://spin.js.org/

以上所述是小编给大家介绍的利用 spin.js 生成等待效果(js 等待效果),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript xml为数据源的下拉框控件
Jul 07 Javascript
JavaScript 事件对象的实现
Jul 13 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
js下将金额数字每三位一逗号分隔
Feb 19 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 #Javascript
Angular中的interceptors拦截器
Jun 25 #Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 #Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 #Javascript
Angular2.js实现表单验证详解
Jun 23 #Javascript
JS实现多张图片预览同步上传功能
Jun 23 #Javascript
Vue组件化通讯的实例代码
Jun 23 #Javascript
You might like
php缓存技术介绍
2006/11/25 PHP
php异常处理使用示例
2014/02/25 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
python抓取网页内容示例分享
2014/02/24 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
利用Python实现kNN算法的代码
2019/08/16 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
linux 下selenium chrome使用详解
2020/04/02 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
如何写一份好的自荐信
2014/01/02 职场文书
暑期学习心得体会
2014/09/02 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python