Когда мы просматриваем Интернет, мы часто видим приглашение ЗАГРУЗКА, которое появляется при загрузке данных. На самом деле принцип работы этой функции очень прост, то есть DIV покрывает текущую страницу, а затем на покрытом слое DIV отображается загрузка. Теперь давайте это реализуем.
1.Текущая страница:
Скопируйте код кода следующим образом:
<div><a href="#" onclick="showLoading()">Загрузка</a></div>
2. Маскирующий слой:
Скопируйте код кода следующим образом:
<div id="over"></div>
3. Загрузка слоя отображения:
Скопируйте код кода следующим образом:
<div id="layout"><img src="//files.VeVB.COm/file_images/article/201311/2013112931.gif" /></div>
Общий код:
Скопируйте код кода следующим образом:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<title></title>
<style type="text/css">
.текущий а {
размер шрифта: 20 пикселей;
}
.над {
дисплей: нет;
позиция: абсолютная;
верх: 0;
слева: 0;
ширина: 100%;
высота: 100%;
цвет фона: #f5f5f5;
непрозрачность: 0,5;
z-индекс: 1000;
}
.макет {
дисплей: нет;
позиция: абсолютная;
верх: 40%;
осталось: 40%;
ширина: 20%;
высота: 20%;
z-индекс: 1001;
выравнивание текста: по центру;
}
</стиль>
<тип сценария="текст/javascript">
функция showLoading()
{
document.getElementById("over").style.display = "block";
document.getElementById("layout").style.display = "block";
}
</скрипт>
</голова>
<тело>
<div><a href="#" onclick="showLoading()">Загрузка</a></div>
<div id="over"></div>
<div id="layout"><img src="//files.VeVB.COm/file_images/article/201311/2013112931.gif" /></div>
</тело>
</html>
Конечный эффект:
Я также видел в Интернете еще один метод реализации, который, как мне кажется, хорош, заключающийся в том, чтобы использовать JS для постоянного изменения значения html-тега для достижения эффекта загрузки подсказок. По его идее я реализовал это сам. код следующий:
Скопируйте код кода следующим образом:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<title></title>
<!-- <script src="Scripts/jquery-1.8.2.js"></script>-->
<style type="text/css">
#ТБ {
ширина: 100%;
высота: 100%;
высота строки: 10 пикселей;
}
#tb tr td {
выравнивание текста: по центру;
}
.прогрессбар {
семейство шрифтов: Arial;
шрифт-вес: жирнее;
цвет: серый;
цвет фона: белый;
отступ: 0 пикселей;
стиль границы: нет;
}
.процент {
семейство шрифтов: Arial;
цвет: серый;
выравнивание текста: по центру;
ширина границы: средняя;
стиль границы: нет;
}
</стиль>
<тип сценария="текст/javascript">
вар бар = 0;
вар шаг = "||";
/*
*Первый способ: $(document).ready(function(){.....});
*/
//$(функция () {
// прогресс();
//);
/*
*Второй способ
*/
//window.onload = функция () {
// прогресс();
//}
/*
*Третий способ имитирует $(document).ready(function(){.....});
*/
(функция () {
var ie = !!(window.attachEvent && !window.opera);
var wk = /webkit//(/d+)/i.test(navigator.userAgent) && (RegExp.$1 <525);
вар фн = [];
var run = function () { for (var i = 0; i < fn.length; i++) fn[i]() };
вар д = документ;
г. готово = функция (f) {
if (!ie && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
если (fn.push(f) > 1) return;
если (т.е.)
(функция () {
попробуйте { d.documentElement.doScroll('left');
catch (ошибка) { setTimeout(arguments.callee, 0 });
})();
иначе, если (нед.)
вар т = setInterval(функция () {
if (/^(loaded|complete)$/.test(d.readyState))
ClearInterval (т), запустить ();
}, 0);
};
})();
document.ready(функция () {
прогресс();
});
функция прогресс() {
бар = бар + 2;
шаг = шаг + "||";
document.getElementById("percent").value = bar + "%";
document.getElementById("progressbar").value = шаг;
если (бар <= 98) {
setTimeout("прогресс()", 100);
}
}
</скрипт>
</голова>
<тело>
<идентификатор таблицы="tb">
<тр>
<тд>
<input type="text" size="50" id="percent" /></td>
</tr>
<тр>
<тд>
<input type="text" size="50" id="progressbar" /></td>
</tr>
</таблица>
</тело>
</html>
Конечный эффект: