JS와 CSS는 웹페이지 로딩 중 애니메이션 효과 공유를 실현합니다.
- 小云云원래의
- 2018-01-02 09:38:361855검색
이 글은 웹 페이지 로딩 시 애니메이션 효과를 자세히 구현하기 위해 주로 JS+CSS를 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.
필수 자료:
애니메이션 gif 그림 로드
기본 논리:
모달 상자 마스크 + loading.gif 애니메이션,
숨겨진 모달 상자는 기본적으로
페이지에서 Ajax 요청 데이터 전송을 시작합니다. box가 표시됩니다
요청이 완료되고 모달 상자가 숨겨집니다
이제 간단하게 연습하기 위해 Django를 통해 새로운 웹 애플리케이션을 생성합니다
Practice
1. 새로운 Django 프로젝트를 생성하고 애플리케이션 app01을 생성하고 구성합니다. 라우팅 및 정적, 생략됨.
2. test.html 페이지를 반환하는 함수를 뷰에서 정의합니다.
def test(request): return render(request, 'test.html')
3.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 导入css样式 --> <link rel="stylesheet" href="/static/css/loading.css" rel="external nofollow" > <!-- 导入jquery 和 js文件 --> <script src="/static/plugins/jquery-3.2.1.js"></script> <script src="/static/js/loading.js"></script> </head> <body> <h1>你好啊，朋友！</h1> <hr> <p id="content"> <p>正在请求服务器数据....</p> </p> <!-- 模态框部分 --> <p class="loading hide"> <p class="gif"></p> </p> </body> </html>
4. CSS 스타일은 다음과 같습니다.
/* 模态框样式 */
.loading {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: black;
opacity: 0.4;
z-index: 1000;
}
/* 动图样式 */
.loading .gif {
height: 32px;
width: 32px;
background: url('/static/img/loading.gif');
position: fixed;
left: 50%;
top: 50%;
margin-left: -16px;
margin-top: -16px;
z-index: 1001;
}지침:
위치 설정: 고정, 위쪽, 아래쪽, 왼쪽 및 오른쪽을 0으로 설정하면 모달 상자는 전체 페이지를 덮습니다.
gif 동적 설정 그림은 배경이고 중앙에는 로딩 효과가 표시됩니다.
z-index 값을 설정하면 gif 그림이 모달 상자 위에 일시 중지됩니다.
background-color: 검정색은 명확하게 보이도록 하기 위한 것이며 특정 용도는 흰색으로 설정할 수 있습니다.
$(function () {
//准备请求数据，显示模态框
$('p.loading').show();
$.ajax({
url: "/ajax_handler.html/",
type: 'GET',
data: {},
success: function (response) {
var content = response.content;
$('#content').html(content);
//请求完成，隐藏模态框
$('p.loading').hide();
},
error: function () {
$('#content').html('server error...');
//请求完成，隐藏模态框
$('p.loading').hide();
}
})
}); 설명:
페이지 이후 로드되면 Ajax 요청을 보내기 시작하고 서버 ajax_handler 뷰에서 데이터를 요청한 후 모달 상자를 표시합니다.
from django.http import JsonResponse
from django.utils.safestring import mark_safe # 取消字符串转义
def ajax_handler(request):
# 模拟网络延迟
import time
time.sleep(3)
msg = ''' XXX ''' # 这里你可以随便放入一些字符串
return JsonResponse({"content": mark_safe(msg)})효과는 다음과 같습니다: 
관련 권장 사항:
JS 및 CSS 로딩의 작은 문제에 대한 토론_기본 지식
위 내용은 JS와 CSS는 웹페이지 로딩 중 애니메이션 효과 공유를 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!