Rumah >hujung hadapan web >tutorial js >用 spin.js生成等待效果的实例详解

用 spin.js生成等待效果的实例详解

零下一度asal: 2017-06-27 16:17:252012semak imbas

这篇文章主要介绍了利用 spin.js 生成等待效果(js 等待效果),需要的朋友可以参考下

利用 js 生成一个界面友好的等待效果，使用 jquery 插件 spin.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 : &#39;#efefef&#39;, // #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 : &#39;spinner&#39;, // CSS class to assign to the element
 top : &#39;50%&#39;, // center vertically
 left : &#39;50%&#39;, // center horizontally
 shadow : false, // Whether to render a shadow
 hwaccel : false, // Whether to use hardware acceleration (might be buggy)
 position : &#39;absolute&#39; // 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 : &#39;red&#39;, // #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 : &#39;spinner&#39;, // CSS class to assign to the element
 top : &#39;50%&#39;, // center vertically
 left : &#39;50%&#39;, // center horizontally
 shadow : false, // Whether to render a shadow
 hwaccel : false, // Whether to use hardware acceleration (might be buggy)
 position : &#39;absolute&#39; // Element positioning
 };
</script>
<title>Insert title here</title>
</head>
<body>
 <p id="preview1" class="preview"></p>
 <p id="preview2" class="preview"></p>
</body>
<script type="text/javascript">
 $(&#39;#preview1&#39;).spin(opts1);
 $(&#39;#preview2&#39;).spin(opts2);
</script>
</html>

Atas ialah kandungan terperinci 用 spin.js生成等待效果的实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：浅谈axios中的get,post方法介绍Artikel seterusnya：分享Bootstrap模态框插入视频的实例代码

Artikel berkaitan

Lihat lagi