Программа анимации JS Progress Progress - моя личная работа. Если это не очень хорошо написано, вы можете ссылаться на это, но без моего разрешения, пожалуйста, не используйте его для других целей!
Утром я написал анимацию по загрузке домашней страницы. Я хотел использовать его в своем блоге. Я обнаружил, что парк блога загружен слишком быстро и вообще не мог видеть эффект анимации. Я только что загрузил «полный». Забудьте об этом, не делайте блог слишком раздутым!
Поэтому я написал демонстрационную страницу и добавил iframe в тело для загрузки более крупных веб -сайтов, чтобы я мог увидеть эффект!
Время воспроизведения открытия анимации CSS с Safari стало синхронизированным. Я не знаю почему, но местный тест в порядке (пожалуйста, дайте мне несколько советов!), У Chrome и Firefox нет проблем, но я не проверял т.е.
Статистика времени загрузки Я использовал свойство производительности объекта Windows, который является методом, специально используемым для расчета точного времени. Это описание MDN о свойстве производительности.
Принцип реализации этого примера относительно прост, но на самом деле он не отображает прогресс загрузки в соответствии с размером файла. Это только изменяет прогресс отображения в соответствии со статусом Document.ReadyState, когда запускается событие Document.onReadyStateChange. Фактически, существует еще один более надежный метод, использующий событие прогресса экземпляра объекта xmlhttprequest для подробного интерпретации xmlhttprequest, например:
var request = new xmlhttprequest (); request.onprogress = function (e) {if (e.lengthcompable) {// lengthcompable относится к тому, имеет ли файл размер, значение верно, false prodgse.innerhtml = math.round (100* e.loaded/e.total) +/'%/'; // загружен, общее количество представляет размер и общий размер, который был загружен}}}}}}}}}}}Это довольно трудно реализовать с помощью вышеуказанного метода, и он не может достичь 100% реального прогресса нагрузки, поэтому я просто притворился немного фальшивым, не нуждаясь в нем!
В этом примере также используется метод документа. Вот мое краткое изложение: краткое изложение метода чтения и написания стилей CSS с Native JS
Что касается реализации анимации CSS, пожалуйста, прочитайте код самостоятельно. Это очень простой код. Если у вас есть трудности с чтением, рекомендуется восполнить основы CSS. Я представлю некоторую практическую информацию. Веб -сайт китайского справочного руководства CSS. У меня есть ограниченные навыки выражения, поэтому я не буду пережевывать это здесь.
Вот полный код + демонстрация:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> works sufu </title> <script> document.onsurestatechange = function () {function $ id (id) {return document.getelementbyid (id)} var width = 0, id, prolauder_line = $ id ('preloader_line'). FirstElementChild, PreLoader = $ id ('preloader'), preloader_center = $ id ('preloader_center'), preloader_btn = $ id ('preloader_btn'), preloader_loading = $ id ('preload_laduing'); if (document.readystate == "Interactive") {загрузка (1110,50); } if (document.ReadState == "overse") {загрузка (5,120,16,7); preloader_loading.id = 'preloader_loaded'; preloader_loading.innerhtml = 'Загрузка полного'+'<br/>'+'с использованием:'+performance.now (). tofixed (3)+'ms'; preloader_btn.innerhtml = 'ente r'; preloader_btn.style.borderbottom = '4px Solid Green'; preloader_btn.style.fontstyle = 'nehroit'; preloader_btn.style.fontsize = '24px'; if (document.stylesheets [0] .insertrule) {document.stylesheets [0] .insertrule ('#preloader_btn: Hover {Border-Bottom: 4px Solid Green; Border-Radius: 60px; Color: Red;}', 0); } else {// совместимо с document.stylesheets [0] .Addrule ('#preloader_btn: Hover {Border-Bottom: 4px Solid Green; Border-Radius: 60px; Color: Red;}', 0); } preloader_btn.onclick = function () {var opacity = 1, id; Функция hide () {if (opacity <= 0) {cleartimeout (id); preloader.style.display = 'none'; document.body.style.overflow = 'auto'; возвращаться; } непрозрачность -= 0,1; preloader.style.opacity = непрозрачность; id = settimeout (function () {hide ();}, 50); } скрывать(); }; } функция загрузка (шаг, макс, время) {if (width> = max) {cleartimeout (id); if (max> = 120) {preloader_line.parentnode.style.display = 'none'; } возвращаться; } ширина += step; preloader_line.style.width = width+'px'; id = settimeout (function () {загрузка (шаг, макс, время);}, время); }}}; </script> <style> body {overflow: hidden; } #preloader {position: Absolute; Ширина: 100%; высота: 100%; фоновый цвет: белый; Z-Index: 999; } #preloader_center {position: Absolute; слева: 0; Справа: 0; Верх: 0; Ширина: 150px; Высота: 75px; Порность: Авто; } #preloader_loading {position: Absolute; слева: 0; Справа: 0; Верх: 45px; Порность: Авто; Ширина: 96px; Высота: 30px; } #preloader_loaded {position: Absolute; слева: 0; Справа: 0; Верх: 45px; Порность: Авто; размер шрифта: 12px; Текст-альбом: Центр; высота линии: 30px; } #preloader_loading span {position: Absolute; Ширина: 10px; Высота: 2px; Верх: 0; Внизу: 0; Порность: Авто; фоновый цвет: #9b59b6; Анимация: загрузка 1,5 с бесконечной легкостью; } #preloader_loading span: nth-child (2) {left: 12px; анимация-задержка: .1S; } #preloader_loading span: nth-child (3) {слева: 24px; анимация-задержка: .2s; } #preloader_loading span: nth-child (4) {left: 36px; анимация-задержка: .3s; } #preloader_loading span: nth-child (5) {left: 48px; анимация-задержка: .4s; } #preloader_loading span: nth-child (5) {left: 48px; анимация-задержка: .4s; } #preloader_loading span: nth-child (5) {left: 48px; анимация-задержка: .4s; } #preloader_loading span: nth-child (5) {left: 48px; анимация-задержка: .4s; } #preloader_loading span: nth-child (4) {left: 36px; анимация-задержка: .3s; } #preloader_loading span: nth-child (5) {left: 48px; анимация-задержка: .4s; } #preloader_loading span: nth-child (5) {left: 48px; анимация-задержка: .4s; } #preloader_loading span: nth-child (5) {left: 48px; анимация-задержка: .4s; } #preloader_loading span: nth-child (4) {left: 36px; анимация-задержка: .3s; } #preloader_loading span: nth-child (5) {left: 48px; анимация-задержка: .4s; } #preloader_load span: nth-child (6) {left: 50px; анимация-задержка: .5s; } #preloader_loading span: nth-child (7) {left: 62px; анимация-задержка: .6s; } #preloader_loading span: nth-child (8) {left: 74px; анимация-задержка: .7s; } #preloader_loading span: nth-child (9) {left: 86px; анимация-задержка: .8s; } @keyframes loading { 0%{height: 2px;background:#9b59b6;} 15%{height: 20px;background:#3498db;} 50%{height: 2px;background:#9b59b6;} 100%{height: 2px;background:#9b59b6;} } iframe{width: 100%;height: 1000px;} #preloader_btn {position: Absolute; слева: 0; Справа: 0; Верх: 0; Порность: Авто; дисплей: блок; Ширина: 122px; Высота: 40px; размер шрифта: 14px; Текст-альбом: Центр; высота линии: 40px; курсор: указатель; Цвет: #9b59b6; в стиле шрифта: курсив; -Вебкит-транзиция: все .5s; -Моз-трансляция: все .5s; -Мас-транзиция: все .5s; -О-транзиция: все .5s; Переход: все .5s; } #preloader_line {position: Absolute; слева: 0; Справа: 0; Верх: 40px; Порность: Авто; Ширина: 120px; Высота: 2px; Граница: 1px твердый зеленый; } #preloader_line span {display: block; Высота: 2px; Ширина: 0; фоновый цвет: зеленый; } </style> </head> <body> <div id = "preloader"> <div id = "preloader_center"> <span id = "preloader_btn"> загрузка ... </span> <span id = "preloader_line"> <pran> </span> </span> <div id = "preloader_line"> <pran> </span> </span> <div id = id = "preloader_loading"> <pan> </span> <pran> </span> <pan> </span> <pan> </span> <pan> </span> </div> </div> </div> <iframe src = "http://jd.com"> </iframe> </body> </html>Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.