Лекции (989962), страница 63
Текст из файла (страница 63)
Переменные: ns (Netscape), ns6 (Netscape 6.0), ie (MS Internet Explorer).*/ns=(document.layers)?1:0;ns6=(document.getElementById&&!document.all)?1:0; Ляхевич А.Г., 2000 - 2002 годie=(document.all)?1:0;var pos1x=0; var pos1y=0; var pos2x=550; var pos2y=0;var speed1=Math.floor(Math.random()*10)+5; var speed2=Math.floor(Math.random()*10)+5;function next(){pos1x=pos1x+speed1;pos1y=pos1y+speed1;if (pos1x>550) pos1x=0; if (pos1y>300) pos1y=0;pos2x=pos2x-speed2;pos2y=pos2y+speed2;if (pos2x<0) pos2x=550; if (pos2y>300) pos2y=0;if (ns) {document.ris1.left=poslx; document.ris1.top=pos1y;document.ris2.left=pos2x; document.ris2.top=pos2y; }if (ie) {document.all.ris1.style.left=pos1x; document.all.ris1.style.top=pos1y;document.all.ris2.style.left=pos2x; document.all.ris2.style.top=pos2y; }if (ns6) {document.getElementById("ris1").style.left=pos1x; document.getElementById("ris1").style.top=pos1y;document.getElementById("ris2").style.left=pos2x; document.getElementById("ris2").style.top=pos2y; }window.setTimeout("next();", 10);}</SCRIPT></HEAD><BODY onLoad="next();"><H1>Создание анимации с помощью DHTML</H1> <HR><DIV ID="ris1" STYLE="position:absolute; left:0; top:0; width:200; height:100; visibility:show"><A HREF="http:\\www.microsoft.com">Просто ссылка</A></DIV><DIV ID="ris2" STYLE="position:absolute; left:550; top:0; width:200; height:100; visibility:show"><IMG src="kartinka2.gif" width="100px" height="100px" alt="картинка" border="0"></DIV></BODY></HTML>Зависимость программ на JavaScript от типа браузераКак видно из кода примера предыдущего раздела, программы JavaScript, выполняющиеся в различныхбраузерах, отличаются, т.к.
отличаются объектные модели самих браузеров. Поэтому первым шагомпрограммы должно быть определение типа браузера. После чего, в необходимых точках программыпредусматривается выполнение различных блоков команд для различных типов браузеров.Для определения типа браузера могут использоваться различные приемы. В частности, можнопользоваться свойствами navigator.appName (название браузера) и navigator.appVersion (версия браузера).Однако мне более удобным и элегантным кажется метод, основанный на различной реализации браузерамиобъектов для работы со слоями.Пример, приведенный ниже, иллюстрирует этот прием. В нем определяется тип браузера и, взависимости от этого, используется разный программный код для организации анимации рисунка, находящегося внутри слоя.
В примере вводятся три переменные: ns (Netscape Navigator), ie (Internet Explorer) и ns6(Netscape Navigator 6.0). Если, в результате проверки существования того или иного объекта, какая-либопеременная получает значение "истина", то значит мы имеем дело с соответствующим браузером. Такойподход выгоден и потому, что может существовать множество браузеров, название которых трудно перечислить, но которые копируют объектную модель соответствующих популярных браузеров. Так, например,работа со слоями в браузере Opera реализована аналогично Internet Explorer (document.all.название_слоя.style.свойства_слоя), а значит программы для Internet Explorer сработают и в браузере Opera.Пример:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title> Определение типа браузера</title><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> Ляхевич А.Г., 2000 - 2002 год</head><body><div id="elogo" style="position:absolute; top:10; left:10; width:100; height:82"><img src="enot1.gif" alt="gilermo" width="100" height="82" name="enot"></div>/* определение типа браузера.
*/<script language="JavaScript">ns=(document.layers)?1:0;ns6=(document.getElementById&&!document.all)?1:0;ie=(document.all)?1:0;/* предварительная загрузка рисунков для анимации */me=new Array (4);e1=new Image(); e2=new Image(); e3=new Image(); e4=new Image();e1.src="enot1.gif"; e2.src="enot1m.gif"; e3.src="enot2.gif"; e4.src="enot2m.gif";me[1]=e1; me[2]=e2; me[3]=e3; me[4]=e4; ienot=1;/* анимация */function goEnot() {if (ns) document.elogo.document.enot.src=me[ienot].src; // версия кода для Netscape Navigatorif (ns6||ie) document.enot.src=me[ienot].src;// версия кода для Internet Explorer, Netscape 6, Operaienot++; if (ienot>2) ienot=1;T=setTimeout("goEnot()",300);}goEnot();</script></body></html> Ляхевич А.Г., 2000 - 2002 год.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
