Maison > Article > interface Web > Explication détaillée d'exemples d'utilisation de spin.js pour générer des effets d'attente

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

零下一度original: 2017-06-27 16:17:251986parcourir

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Une brève introduction aux méthodes get et post dans axiosArticle suivant：Une brève introduction aux méthodes get et post dans axios

Articles Liés

Voir plus