집 > 기사 > 웹 프론트엔드 > spin.js를 사용하여 대기 효과를 생성하는 예제에 대한 자세한 설명

spin.js를 사용하여 대기 효과를 생성하는 예제에 대한 자세한 설명

零下一度원래의: 2017-06-27 16:17:251890검색

이 글에서는 주로 spin.js를 사용하여 대기 효과(js wait effect)를 생성하는 방법을 소개합니다. 필요한 친구들은 참고해도 됩니다.

js를 사용하여 친숙한 인터페이스 대기 효과를 생성하려면 jquery 플러그인 spin을 사용하세요. Node.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>

위 내용은 spin.js를 사용하여 대기 효과를 생성하는 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：Axios의 get 및 post 메소드에 대한 간략한 소개다음 기사：Axios의 get 및 post 메소드에 대한 간략한 소개