DynamicBannerViewer: "Анимированный баннер"
Здесь находится анимированный баннер этого сайта стандартного размера баннерной сети "Ushki" (154 на 60 пикселов), иллюстрирующий применение некоторых методов
апплета DynamicBannerViewer.
Апплет загружает 9 изображений: изображение, с которого начинается цикл анимации(без надписей и прямоугольников),
изображение содержащее надпись "Java-апплеты", 5 изображений для создания эффекта появляющихся на логотипе
прямоугольников а также 2 изображения, содержащих надпись в нижней части, выполненные разным цветом.
Все изображения являются "прозрачными".
В качестве начального изображения заднего плана задается полное изображение баннера (параметр picture).
В качестве URL для работы апплета в качестве графической ссылки задается описание аплета DynamicBannerViewer.
Цикл анимации запускается каждые 30 секунд и состоит из 4 частей.
В первой части цикла после вывода на заднем плане начального изображения на переднем плане апплета выводятся изображения,
создающие эффект появляющихся прямоугольников, после чего изображение в окне апплета устанавливается в качестве
изображения заднего плана.
Во второй части цикла изображение со строкой "Java-апплеты" движется справа налево и останавливается на своем обычном месте,
после чего изображение в окне апплета снова устанавливается в качестве изображения заднего плана.
В третьей части цикла выводится надпись в нижней части баннера с эффектом "печатной машинки". Эффект создается за счет
циклического вывода на переднем плане фрагментов изображения, содержащего полную надпись. Вывод начинается с фрагмента
изображения, содержащего одну букву. С каждым шагом цикла фрагмент увеличивается на ширину одной буквы.
Четвертая часть цикла запускается через 5 секунд. В этой части цикла создается эффект "мерцания" нижней надписи.
Эффект создается за счет циклической смены изображений, содержащих нижнюю надпись выполненную разными цветами.
...
<APPLET CODEBASE="banner" CODE="DynamicBannerViewer.class" ARCHIVE="b_viewer.zip, images.zip"
WIDTH="154" HEIGHT="60" NAME="bannerviewer">
<PARAM NAME="picture" VALUE="imbanner.gif">
<PARAM NAME="bgcolor" VALUE="CCFFCC">
<PARAM NAME="link" VALUE="http://www.orel.ru/imager/foreground.php">
<PARAM NAME="filenmlist" VALUE="imstart.gif jap.gif r1.gif r2.gif r3.gif r4.gif r5.gif dtext.gif rtext.gif">
</APPLET>
...
<SCRIPT LANGUAGE="JavaScript" SRC="banner/mybanner.js">
</SCRIPT>
...
Вы можете разместить этот баннер у себя на сайте набрав этот HTML-текст и изменив некоторые значения дескрипторов:
CODEBASE="http://www.orel.ru/imager/banner"
link VALUE="http://www.orel.ru/imager"
SCRIPT SRC="http://www.orel.ru/banner/mybanner.js"
Цвет фона баннера вы можете установить по своему усмотрению изменив параметр bgcolor.
В начало страницы
<!--
/* Счетчик для вывода прямоугольников */
imIndex=2;
/* Текущая координата для вывода текста */
sx = 0;
/* Счетчик "мерцаний" */
counter=0;
/* Начальный размер фрагмента для эффекта "печатной машинки" */
imSize = 7;
/* Для выбора рисунка при эффекте "мерцания" */
chooser=true;
delay = window.setInterval("animCycle()", 30000);
function animCycle(){
/* Цикл анимации запускается после загрузки всех изображений. Время до первого вызова функции
animCycle() (20 секунд) достаточно для загрузки апплета и начала загрузки изображениий */
if(!document.applets.bannerviewer.isLoading())
cycle = window.setInterval("foreView()", 700);
document.applets.bannerviewer.clearFore(false);
document.applets.bannerviewer.backPaint(0, 1, true);
}
/* вывод прямоугольников */
function foreView(){
if (imIndex<=6){
/* Перед выводом изображения осуществляется проверка успешности его загрузки */
if(document.applets.bannerviewer.isSuccess(imIndex))
document.applets.bannerviewer.forePaint(0, 0, i, 1,true);
imIndex++;
}
else {
window.clearInterval(cycle);
document.applets.bannerviewer.setBack(false);
imIndex=2;
sx = document.applets.bannerviewer.getAppletWidth();
cycle = window.setInterval("foreScroll()", 40);
}
}
/* "бегущая строка" вверху */
function foreScroll(){
/* Определяем начальную координату для вывода текста */
if ((sx >= 60)&&document.applets.bannerviewer.isSuccess(1)){
sx -= 2;
document.applets.bannerviewer.forePaint(sx, 2, 1, 1,true);
}
else{
window.clearInterval(cycle);
document.applets.bannerviewer.forePaint(59, 2, 1, 1,true);
document.applets.bannerviewer.setBack(false);
sx = document.applets.bannerviewer.getAppletWidth();
cycle = window.setInterval("foreType()", 180);
}
}
/* эффект "печатной машинки" внизу */
function foreType(){
if (imSize<=147){
if(document.applets.bannerviewer.isSuccess(7))
document.applets.bannerviewer.fragmentPaint(3, 46, 7, 0, 0,
imSize, 13, 1, true);
imSize+=7;
}
else{
window.clearInterval(cycle);
imSize=7;
window.setTimeout("startBlink()", 5000);
}
}
function startBlink(){
window.clearTimeout();
cycle = window.setInterval("blink()", 200);
}
/* "мерцающий текст" внизу */
function blink(){
if (counter <=15){
if (chooser==false){
if(document.applets.bannerviewer.isSuccess(7))
document.applets.bannerviewer.forePaint(3,46,7,1,true);
}
else{
if(document.applets.bannerviewer.isSuccess(8))
document.applets.bannerviewer.forePaint(3,46,8,1,true);
}
counter++;
chooser = !chooser;
}
else{
window.clearInterval(cycle);
counter=0;
chooser=true;
}
}
// -->
В начало страницы
|
