|
Приветствую всех. кто читает данную тему. Подобный эффект я видел на демо-сайте Shape 5, но сказать честно решение их меня не впечатлило (особенно такая необходимость подключать mootols библиотеку), притом что не свое - не трогай :) Итак, данный скрипт позволяет динамично менять изображения при помощи затухания. Думаю очень пригодится для игровых сайтов. Получилось ничуть не хуже: не тормозит, разницы не видно. Характеристика скрипта: -Адаптированность Вот на каких браузерах я испытывал данный скрипт:
Версия скрипта: 0.9b Internet Explorer со своими багами не понимает толковых значений z-index. Я даже не стал с ним возиться. 6 версия не отображает position:fixed, так что вам либо придется делать сайт на position:absolute, либо задать фон на <body> и закрыть с помощью условных операторов (браузер агентов) доступ к скрипту... Приступим к установке скрипта: На страницу после <body> вставляем следующее: Code <script> var imgArray = new Array("img1", "img2", "img3"); var delayTime = 10000; //1 sec = 1000 (ms) var fadeTime = 1000; //1 sec = 1000 (ms) var startZ = -100; //z-index function ArrayShuffle(a) { var d, c, b = a.length; while (b) {c = Math.floor(Math.random() * b); d = a[--b]; a[b] = a[c]; a[c] = d } return a;};ArrayShuffle(imgArray); //ArrayShuffle (перемешка картинок. Этот кусок можно удалить, если не нужен) </script> <script src="http://xteam-area.ucoz.com/BackgroundSlide.js"></script> Заливаем скрипт из прикреплённого архива в папку js Разберем некоторые параметры: imgArray - вместо img1, img2... вставляете пути к изображениям. Ссылок может быть сколько угодно delayTime - интервал смены картинок. Советую ставить не менее 30000 (30 секунд), иначе получите раздраженных пользователей. fadeTime - время анимации (затухания) изображения startZ - начальный z-index (если не знаем, пускай так и остается) Функция ArrayShuffle может по необходимости удалена. К сожалению не могу сказать кто автор этой функции (источник не указан). Используется в данном скрипте для показа случайного изображения после загрузки страницы. Вот и все! Наслаждайтесь! Для того, чтобы сделать этот скрипт на опции необходимо:1) Подключенная библиотека cookies.js 2) удалить в скрипте первую строку - animBG(startZ); 3) Дописать на нужной странице код: Code
<label for="checkIn"><input type="checkbox" class="startAnimator" id="checkIn">Включить слайд фона</label> <script> $('.startAnimator').click(function(){ var chkAnSc = $('.startAnimator').attr('checked'); if(chkAnSc=='checked'){ setCookie('animator', 3650, 100); }else{ eraseCookie('animator');}; }); if(getCookie('animator')){ $('.startAnimator').attr('checked', 'checked'); animBG(startZ); } </script> |
||||||||||||||
|
Хостинг от uCoz |
||||||||||||||
