Webmaster Webdesigner + + Builder проектов

Вот "прелоадер", которая будет загружать ваши страницы перед отображением содержимого. Это "прелоадер" отображает анимированный рисунок во время загрузки с белым фоном.

Вот пример того, что она может дать, я бы посоветовал не использовать этот сценарий, если вы использовали "CSS Reset". И не используйте тэг "DIV" Общие "CSS" позицию, используя "родственник" для всех

Вот код Javascript на этой прелоадер.

 speed = 10 ; var transition = 10 ; // Dimensions du preloader en GIF animé var GIFpreloadLargeur = 20 ; var GIFpreloadHauteur = 20 ; var timer= 0 ; var opaciT = 100 ; function opacity ( ) { opaciT = opaciT - transition; var object = document. getElementById ( "preloader" ) . style ; object. opacity = ( opaciT / 100 ) ; object. MozOpacity = ( opaciT / 100 ) ; object. KhtmlOpacity = ( opaciT / 100 ) ; object. filter = "alpha(opacity=" + opaciT + ")" ; if ( opaciT <= 0 ) { document. getElementById ( "preloader" ) . style . visibility = "hidden" ; / / Вы можете изменить скорость (скорость) (1 == очень быстро) / / Вы можете изменить качество перехода (1 == лучшем случае) / / переход более качественным, более простой и скорость должна быть увеличена уаг скорость = 10; уаг переход = 10 / / размер анимированных GIF прелоадер GIFpreloadLargeur переменная = 20; GIFpreloadHauteur переменная = 20; уаг таймер = 0; уаг непрозрачность = 100; непрозрачность функции () {прозрачность = непрозрачность - переход уаг Объект = документ GetElementById ("прелоадер") стиля;... объекта непрозрачность = (непрозрачность / 100);. объектом MozOpacity = (OPAC / 100);. объектом KhtmlOpacity = (OPAC / 100);. Объект фильтра = "альфа ( Непрозрачность = "+ прозрачность +") ", если (прозрачность <= 0) {документ GetElementById (." прелоадер ") стиль видимость =.." скрытый ";  ,speed ) ; } else { if ( document. layers ) { document. preloadIMG . visibility = "hidden" ; timer = setInterval ( "opacity()" ,speed ) ; } else { document. all . preloadIMG . style . visibility = "hidden" ; timer = setInterval ( "opacity()" ,speed ) ; } } } // GÉNÉRER LE CSS POUR LE PRELOADER var myCSS; myCSS = " <style type= \" text/css \" >" ;   myCSS += "html, body { height:auto; margin:0px; padding:0px;}" ;   myCSS += "#preloader {" ; myCSS += "position:fixed;" ; myCSS += "background-color:white;" ; myCSS += "width:100%;" ; myCSS += "height:100%; " ; myCSS += "display:block;" ; myCSS += "z-index:100000;" ; myCSS += "}" ;   myCSS += "#preloadIMG {" ; myCSS += "position:absolute;" ; myCSS += "left:50%;" ; myCSS += "width:" + GIFpreloadLargeur + "px;" ; myCSS += "height:" + GIFpreloadHauteur + "px;" ; myCSS += "margin-left:-" + ( GIFpreloadLargeur / 2 ) + "px;" ; myCSS += "top:150px;" ; myCSS += "}" ;   myCSS += "</style>   " ; // ÉCRITURE DES CSS window. document . write ( myCSS ) ; // ÉXÉCUTION window. onload = function ( ) { preload ( ) ; } таймер = setInterval ("непрозрачность ()", скорость)} Else {если (документ. слоев) {документ preloadIMG видимость = "скрытые",.. setInterval таймер = ("непрозрачность ()", скорость)} Else {документ .... все preloadIMG стиль видимость = "скрытый"; setInterval таймер = ("непрозрачность ()", скорость );}}} / / Создание CSS для прелоадер уаг myCSS; myCSS = "стиль <тип = \" текст / CSS \ ">"; myCSS + = "HTML, BODY {высота: авто; поле: 0px; обивка: 0px;}"; myCSS + = "# {прелоадер"; myCSS + = "позицию: фиксированный;" myCSS + = "фонового цвета: белый;" myCSS + = "Ширина: 100%;" myCSS + = "Высота: 100%;" myCSS + = "дисплей: блок;" myCSS + = "г-индекс : 100000; "myCSS + ="} "; myCSS + =" # {preloadIMG "; myCSS + =" позицию: абсолютная; "myCSS + =" Слева направо: 50%; "myCSS + =" Ширина: "+ GIFpreloadLargeur + "пикселей"; myCSS + = "Высота:" + + GIFpreloadHauteur "пикселей"; myCSS + = "разницы-налево: -" + (GIFpreloadLargeur / 2) + "пикселей"; myCSS + = "сверху: 150px; "myCSS + ="} "; myCSS + =" </ STYLE> "/ / WRITE окна CSS документа писать (myCSS) / / Выполнить окна OnLoad = функция () {предварительной нагрузки ()...; } 

Теперь, вставить этот код сразу после тега BODY. Обратите внимание, что "образ преднагрузки должен быть установлен на вашем сервере и источник должен быть изменен в зависимости от" edroit или свою фотографию.

 <div id="preloader">
 <div id="preloadIMG"> SRC = "loading.gif" <img alt="" /> </ P>
 </ P>

Что ж, теперь у вас есть очень стильно прелоадер для вашего веб-страниц тяжелым.

Теги: Изображения , Javascript , Preloader , XHTML

Эта статья была опубликована Среда, 13 Февраля 2008 в 20:19 и размещена в рубрике Обучение . Вы можете следить за комментариями через RSS 2,0 корм . Вы можете оставить комментарий , или трекбек со своего сайта.