利用 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 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
js活用事件触发对象动作
Aug 10 Javascript
jQuery autocomplete插件修改
Apr 17 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
详解webpack 热更新优化
Sep 13 Javascript
node中的密码安全(加密)
Sep 17 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 Javascript
JavaScript实现与web通信的方法详解
Aug 07 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中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
php记录日志的实现代码
2011/08/08 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
phalcon框架使用指南
2016/02/23 PHP
PHP中header用法小结
2016/05/23 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
Sanic框架Cookies操作示例
2018/07/17 Python
个人自我鉴定写法
2013/11/30 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
请假条的格式
2014/04/11 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
学术会议邀请函
2015/01/30 职场文书
2015暑假假期总结
2015/07/13 职场文书
卫生主题班会
2015/08/14 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python