Explication détaillée d'exemples d'utilisation de spin.js pour générer des effets d'attente-js tutoriel-php.cn

Explication détaillée d'exemples d'utilisation de spin.js pour générer des effets d'attente

零下一度

Libérer： 2017-06-27 16:17:25

original

2030 Les gens l'ont consulté

Cet article présente principalement l'utilisation de spin.js pour générer un effet d'attente (effet d'attente js). Les amis qui en ont besoin peuvent se référer à

Utiliser js pour générer un effet d'attente convivial, en utilisant le plug-in jquery spin.js , il y a une adresse de téléchargement à la fin de l'article. L'image ci-dessous est une capture d'écran de l'effet généré. L'appel de code est très simple.

<%@ 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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!