利用 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 相关文章推荐
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 30 Javascript
Vue简单实现原理详解
May 07 Javascript
react 生命周期实例分析
May 18 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 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连接Oracle数据库
2006/10/09 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
PHP微信分享开发详解
2017/01/14 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
在Django框架中编写Context处理器的方法
2015/07/20 Python
python删除字符串中指定字符的方法
2018/08/13 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
中国跨境电商:Tomtop
2017/03/16 全球购物
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
商场开业庆典策划方案
2014/06/02 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers