Плавающее изображение в правом нижнем углу может перемещаться вверх и вниз по полосе прокрутки.

Автор：Eve Cole Время обновления：2009-06-20 16:05:22

<html> <head> <title>Листинг 35.13. Переход стирания для входящего слайда</title> <script Language="JavaScript" type="text/javascript"> // Этот массив содержит все объекты документа, поддерживающие DHTML var dhtml_objects = new Array() // Эта функция создает пользовательские объекты, которые служат кросс-браузерным интерфейсом function create_object_array() { // Все теги <div> и <span> хранятся в этих переменных var div_tags var span_tags var css_tags // Совместим ли браузер с W3C DOM? if (document.getElementById) { // Если да, используйте getElementsByTagName() для получения тегов <div> div_tags = document.getElementsByTagName("div") // Проходим по тегам <div> for (var counter = 0; counter < div_tags.length; counter++) { // Сохраняем текущий объект current_object = div_tags[counter] // Сохраняем, как браузер обращается к стилям object_css = current_object.style // Сохраняем идентификатор объекта object_id = current_object.id // Сохраняем только эти теги которые имеют идентификатор if (object_id) { // создаем новый объект dhtml_object и сохраняем его в dhtml_objects dhtml_objects[object_id] = new dhtml_object(current_object, object_css, object_id) } } // Используйте getElementsByTagName() для получения тегов <span> span_tags = document.getElementsByTagName("span") // Проходим по тегам <span> for (var counter = 0; counter < span_tags.length; counter++) { // Сохраняем текущий объект current_object = span_tags[counter] // Сохраняем, как браузер обращается к стилям object_css = current_object.style // Сохраняем идентификатор объекта object_id = current_object.id // Сохраняем только те теги, которые имеют идентификатор if (object_id) { // создаем новый dhtml_object и сохраняем его в dhtml_objects dhtml_objects[object_id] = новый dhtml_object(current_object, object_css, object_id) } } } // Совместим ли браузер с DHTML DOM? else if (document.all) { // Если да, используйте document.all для получения тегов <div> div_tags = document.all.tags("div") // Проходим по тегам <div> for (var counter = 0; counter < div_tags.length; counter++) { // Сохраняем текущий объект current_object = div_tags[counter] // Сохраняем, как браузер обращается к стилям object_css = current_object.style // Сохраняем идентификатор объекта object_id = current_object.id // Только сохраните те теги, которые имеют идентификатор if (object_id) { // создаем новый dhtml_object и сохраняем его в dhtml_objects dhtml_objects[object_id] = new dhtml_object(current_object, object_css, object_id) } } // Используйте document.all, чтобы получить <span > tags span_tags = document.all.tags("span") // Проходим по тегам <span> for (var counter = 0; counter < span_tags.length; counter++) { // Сохраняем текущий объект current_object = span_tags[counter ] // Сохраняем, как браузер обращается к стилям object_css = current_object.style // Сохраняем идентификатор объекта object_id = current_object.id // Сохраняем только те теги, которые имеют идентификатор if (object_id) { // создаем новый dhtml_object и сохраняем его в dhtml_objects dhtml_objects[object_id] = new dhtml_object(current_object, object_css, object_id) } } } // Совместим ли браузер с LDOM? else if (document.layers) { // Используйте document.layers для получения позиционированных тегов <div> и <span> css_tags = document.layers // Проходим по слоям for (var counter = 0; counter < css_tags.length; counter++) { // Сохраняем текущий объект current_object = css_tags[counter] // Сохраняем, как браузер обращается к стилям object_css = current_object // Сохраняем идентификатор объекта object_id = current_object.id // Сохраняем только те теги, которые имеют идентификатор if (object_id ) { // создаем новый объект dhtml_object и сохраняем его в dhtml_objects dhtml_objects[object_id] = new dhtml_object(current_object, object_css, object_id) } } } } function dhtml_object (obj, css, id) { this.obj = obj this.css = css this.id = id this.left = get_left this.right = get_right this.top = get_top this.bottom = get_bottom this.width = get_width this.height = get_height this.visibility = get_visibility this.zIndex = get_zIndex this.move_to = move_to this.move_by = move_by this.set_left = set_left this.set_top = set_top this.set_width = set_width this.set_height = set_height this.set_visibility = set_visibility this.set_zIndex = set_zIndex this.move_above = move_above this.move_below = move_below this.set_backgroundColor = set_backgroundColor this.set_backgroundImage = set_backgroundImage this.set_html = set_html this.get_clip_top = get_clip_top this.get_clip_right = get_clip_right this.get_clip_bottom = get_clip_bottom this.get_clip_left = get_clip_left this.get_clip_width = get_clip_width this.get_clip_height = get_c Lip_height this.resize_clip_to = resize_clip_to this.resize_clip_by = resize_clip_by } function get_left() { return parseInt(this.css.left) } function get_right() { return this.left() + this.width() } function get_top() { return parseInt(this.css.top) } function get_bottom() { return this.top() + this.height() } function get_width() { // Это DOM-браузер W3C или DHTML? if (!document.layers) { // Если да, то определена ли ширина? if (this.css.width) { // Если да, возвращаем свойство ширины return parseInt(this.css.width) } else { // Если нет, возвращаем свойство offsetWidth return parseInt(this.obj.offsetWidth) } } else { // Если нет, возвращаем ширину документа слоя return parseInt(this.obj.document.width) } } function get_height() { // Это DOM-браузер W3C или DHTML? if (!document.layers) { // Если да, то определена ли высота? if (this.css.height) { // Если да, возвращаем свойство высоты return parseInt(this.css.height) } else { // Если нет, возвращаем свойство offsetHeight return parseInt(this.obj.offsetHeight) } } else { // Если нет, возвращаем высоту документа слоя return parseInt(this.obj.document.height) } } function get_visibility() { // Это DOM-браузер W3C или DHTML? if (!document.layers) { // Если да, то определена ли видимость? if (this.css.visibility) { // Если да, возвращаем свойство видимости return this.css.visibility } } else { // В противном случае это LDOM-браузер, поэтому // обрабатываем собственные значения видимости if (this.css .visibility == "show") { return "visible" } if (this.css.visibility == "hide") { return "hidden" } } // Если мы зайдём так далеко, просто верните "inherit" return "inherit " } function get_zIndex() { return this.css.zIndex } function move_to (new_left, new_top) { this.css.left = new_left this.css.top = new_top } function move_by (delta_left, delta_top) { // Добавляем дельту значения this.css.left = this.left() + parseInt(delta_left) this.css.top = this.top() + parseInt(delta_top) } function set_left (new_left) { this.css.left = new_left } function set_top (new_top) { this.css.top = new_top } function set_width (new_width) { // Это DOM-браузер W3C или DHTML? if (!document.layers) { // Если да, просто установите свойство ширины this.css.width = new_width } } function set_height (new_height) { // Это DOM-браузер W3C или DHTML? if (!document.layers) { // Если да, просто установите свойство ширины this.css.height = new_height } } function set_visibility (new_visibility) { // Это DOM-браузер W3C или DHTML? if (!document.layers) { // Если да, просто установите видимость // на значение аргумента this.css.visibility = new_visibility } else { // В противном случае установите собственные значения видимости if (new_visibility == " видимый") { this.css.visibility = "показать" } else if (new_visibility == "скрытый") { this.css.visibility = "hide" } else { this.css.visibility = "inherit" } } } function set_zIndex(new_zindex) { // Новый z-индекс больше 0? if (new_zindex > 0) { // Если да, установите this.css.zIndex = new_zindex } else { // Если нет, установите его в 0 this.css.zIndex = 0 } } function move_above(reference_object) { this. css.zIndex = reference_object.css.zIndex + 1 } function move_below(reference_object) { // Получаем z-индекс ссылочного объекта reference_zindex = reference_object.css.zIndex // Он больше 0? if (reference_zindex > 0) { // Если да, установите z-index этого объекта на единицу меньше this.css.zIndex = reference_zindex - 1 } else { // Если нет, установите z-index эталонного объекта на 1 // и этот объект z-index до 0 reference_object.css.zIndex = 1 this.css.zIndex = 0 } } function set_backgroundColor(new_color) { // Это DOM-браузер W3C или DHTML? if (!document.layers) { // Если да, используйте свойство backgroundColor this.css.backgroundColor = new_color } else { // Если нет, используйте свойство bgcolor this.css.bgColor = new_color } } function set_backgroundImage(new_image) { // Это DOM-браузер W3C или DHTML? if (!document.layers) { // Если да, используйте свойство backgroundImage this.css.backgroundImage = "url(" + new_image + ")" } else { // Если нет, используйте свойство фона this.css.background .src = new_image } } function set_html(new_html) { // Это DOM-браузер W3C или DHTML? if (!document.layers) { // Если да, используйте свойство InnerHTML this.obj.innerHTML = new_html } else { // Если нет, используйте метод document.write() this.obj.document.open() this .obj.document.write(new_html) this.obj.document.close() } } function get_clip_top() { // Это DOM-браузер W3C или DHTML? if (!document.layers) { // Если да, сначала проанализируйте строку клипа parse_dom_clip(this) // Значения клипа теперь находятся в объекте current_clip return current_clip.top } else { // В противном случае используйте clip.top return this. css.clip.top } } var current_clip function clip_object(top, right, low, left) { this.top = верх this.right = право this.bottom = низ this.left = left } function parse_dom_clip(current_object) { clip_string = current_object.css.clip if (clip_string.length > 0) { varvalues_string = clip_string.slice(5, clip_string.length - 1) var clip_values =values_string.split(" ") var clip_top = parseInt(clip_values[0]) var clip_right = parseInt(clip_values[1]) var clip_bottom = parseInt(clip_values[2]) var clip_left = parseInt(clip_values[3]) } else { var clip_top = 0 var clip_right = current_object.width() var clip_bottom = current_object.height () var clip_left = 0 } current_clip = new clip_object(clip_top, clip_right, clip_bottom, clip_left) } function get_clip_right() { // Это DOM-браузер W3C или DHTML? if (!document.layers) { // Если да, сначала проанализируйте строку клипа parse_dom_clip(this) // Значения клипа теперь находятся в объекте current_clip return current_clip.right } else { // В противном случае используйте clip.right return this. css.clip.right } } function get_clip_bottom() { // Это DOM-браузер W3C или DHTML? if (!document.layers) { // Если да, сначала проанализируйте строку клипа parse_dom_clip(this) // Значения клипа теперь находятся в объекте current_clip return current_clip.bottom } else { // В противном случае используйте clip.bottom return this. css.clip.bottom } } function get_clip_left() { // Это DOM-браузер W3C или DHTML? if (!document.layers) { // Если да, сначала проанализируйте строку клипа parse_dom_clip(this) // Значения клипа теперь находятся в объекте current_clip return current_clip.left } else { // В противном случае используйте clip.left return this. css.clip.left } } function get_clip_width() { // Это DOM-браузер W3C или DHTML? if (!document.layers) { // Если да, сначала проанализируйте строку клипа parse_dom_clip(this) // Значения клипа теперь находятся в объекте current_clip return current_clip.right - current_clip.left } else { // В противном случае используйте clip. width return this.css.clip.width } } function get_clip_height() { // Это DOM-браузер W3C или DHTML? if (!document.layers) { // Если да, сначала проанализируйте строку клипа parse_dom_clip(this) // Значения клипа теперь находятся в объекте current_clip return current_clip.bottom - current_clip.top } else { // В противном случае используйте clip. width return this.css.clip.height } } function resize_clip_to(new_top, new_right, new_bottom, new_left) { if (new_top == "auto") {new_top = this.get_clip_top() } if (new_right == "auto") {new_right = this.get_clip_right() } if (new_bottom == "auto") {new_bottom = this.get_clip_bottom() } if (new_left == "auto") {new_left = this.get_clip_left() } // Это DOM-браузер W3C или DHTML? if (!document.layers) { // Значения клипа теперь находятся в объекте current_clip this.css.clip = "rect(" + new_top + " " + new_right + " " + new_bottom + " " + new_left + ")" } else { // В противном случае используйте свойства клипа this.css.clip.top = new_top this.css.clip.right = new_right this.css.clip.bottom = new_bottom this.css.clip.left = new_left } } function resize_clip_by( delta_top, delta_right, delta_bottom, delta_left) { var new_top = this.get_clip_top() + delta_top var new_right = this.get_clip_right() + delta_right var new_bottom = this.get_clip_bottom() + delta_bottom var new_left = this.get_clip_left() + delta_left / / Это DOM-браузер W3C или DHTML? if (!document.layers) { // Значения клипа теперь находятся в объекте current_clip this.css.clip = "rect(" + new_top + " " + new_right + " " + new_bottom + " " + new_left + ")" } else { // В противном случае используйте свойства клипа this.css.clip.top = new_top this.css.clip.right = new_right this.css.clip.bottom = new_bottom this.css.clip.left = new_left } } function get_mouse_x( current_event) { // Это Internet Explorer 4 или более поздняя версия? if (its_ie4plus) { // Если да, верните свойство event.clientX return event.clientX } // Это Netscape Explorer 4 или более поздняя версия? else if (its_ns4plus) { // В противном случае верните свойство pageX return current_event.pageX } else { // В противном случае верните значение null return null } } function get_mouse_y(current_event) { // Это Internet Explorer 4 или более поздняя версия? if (its_ie4plus) { // Если да, верните свойство event.clientY return event.clientY } // Это Netscape Explorer 4 или более поздняя версия? else if (its_ns4plus) { // Если да, верните свойство pageY return current_event.pageY } else { // В противном случае верните значение null return null } } function get_client_width() { // Это Internet Explorer 4 или более поздняя версия? if (its_ie4plus) { // Если да, возвращаем свойство clientWidth return document.body.clientWidth } else if (its_ns4plus) { // Если да, возвращаем свойство InternalWidth return window.innerWidth - 18 } else { // В противном случае возвращаем null return null } } function get_client_height() { // Это Internet Explorer 4 или более поздняя версия? if (its_ie4plus) { // Если да, возвращаем свойство clientHeight return document.body.clientHeight } // Это Netscape Explorer 4 или новее? else if (its_ns4plus) { // Если да, верните свойство InternalHeight return window.innerHeight - 18 } else { // В противном случае верните значение null return null } } function get_client_scroll_left() { // Это Internet Explorer 4 или более поздняя версия? if (its_ie4plus) { // Если да, возвращаем свойство ScrollLeft return document.body.scrollLeft } // Это Netscape Explorer 4 или новее? else if (its_ns4plus) { // Если да, верните свойство pageXOffset return pageXOffset } else { // В противном случае верните значение null return null } } function get_client_scroll_top() { // Это Internet Explorer 4 или более поздняя версия? if (its_ie4plus) { // Если да, возвращаем свойство ScrollTop return document.body.scrollTop } // Это Netscape Explorer 4 или новее? else if (its_ns4plus) { // Если да, возвращаем свойство pageYOffset return pageYOffset } else { // В противном случае возвращаем null return null } } </script> <script Language="JavaScript" type="text/javascript"> / / Одной из этих логических переменных // будет присвоено значение true в зависимости от имени браузера var his_ie = false var his_ns = false var his_opera = false var his_webtv = false var his_совместимый = false // Одной из этих логических переменных будет присвоено значение / / true на основе версии Internet Explorer вар his_ie2 = ложь вар его_ie3 = ложь вар его_ie4 = ложь вар его_ie5 = ложь вар его_ie55 = ложь вар его_ie6 = ложь вар его_ie4plus = ложь вар его_ie5plus = ложь вар его_ie55plus = ложь вар его_ie6plus = ложь // Одной из этих логических переменных будет // присвоено значение true в зависимости от версии Netscape var his_ns2 = false var his_ns3 = false var his_ns4 = false var his_ns6 = false var his_ns3plus = false var his_ns4plus = false var his_ns6plus = false // Одна из этих логическим переменным // будет присвоено значение true в зависимости от операционной системы var his_win31 = false var his_win95 = false var his_win98 = false var his_winme = false var his_winnt = false var his_win2000 = false var his_winxp = false var his_windows = false var his_win32 = false var his_mac68k = false var his_macppc = false var his_macos = false var his_linux = false var his_other_os = false // Это будет верно, если браузер поддерживает некоторый вид DHTML var dhtml_ok = false // Давайте работать со строчными буквами, чтобы не усложнять задачу var user_agent = navigator.userAgent.toLowerCase() // ИМЯ БРАУЗЕРА // Используйте indexOf() для проверки строки userAgent // на предмет характерных признаков имени браузера if (user_agent.indexOf("opera") != -1) { his_opera = true } else if (user_agent.indexOf("webtv") != -1) {its_webtv = true } else if (user_agent.indexOf("msie") != -1) {its_ie = true } else if (user_agent. indexOf("mozilla") != -1) { // Для "moziila" нам нужно исключить некоторые другие возможности, сначала if ((user_agent.indexOf("совместимый") == -1) && (user_agent.indexOf ("спуфер") == -1) && (user_agent.indexOf("hotjava") == -1)) {its_ns = true } else { his_совместимость = true } } // ВЕРСИЯ БРАУЗЕРА var major_version = parseInt(navigator.appVersion ) var full_version = parseFloat(navigator.appVersion) var ie_start = user_agent.indexOf("msie") if (ie_start != -1) { var version_string = user_agent.substring(ie_start + 5) major_version = parseInt(version_string) full_version = parseFloat (строка_версии) } // INTERNET EXPLORER if (its_ie || his_webtv) { if (major_version < 3) { his_ie2 = true } else if (major_version == 3) { his_ie3 = true } else if (major_version == 4) { his_ie4 = true } else if (major_version == 5) { his_ie5 = true } else if (full_version == 5.5) { his_ie55 = true } else if (major_version == 6) { his_ie6 = true } if (major_version >= 4) { his_ie4plus = true } if (major_version >= 5) { his_ie5plus = true } if (full_version >= 5.5) { his_ie55plus = true } if (major_version >= 6) { his_ie6plus = true } } // NETSCAPE if (its_ns) { if (major_version < 3) { his_ns2 = true } else if ( major_version < 4) { his_ns3 = true } else if (major_version == 4) { his_ns4 = true } else if (major_version == 5) { his_ns6 = true } if (major_version >= 3) { his_ns3plus = true } if (major_version >= 4) {its_ns4plus = true } if (major_version >= 5) { his_ns6plus = true } } // ОПЕРАЦИОННАЯ СИСТЕМА // Используйте indexOf() для проверки строки userAgent // на предмет характерных признаков операционной системы // WINDOWS 3.1 if ((user_agent.indexOf("windows 3.1") != -1) || (user_agent.indexOf("win16") != -1) || (user_agent.indexOf("16bit") != -1) || (user_agent.indexOf("16-bit") != -1)) { his_win31 = true } // WINDOWS 95 else if ((user_agent.indexOf("windows 95") != -1) || (user_agent.indexOf ("win95") != -1)) {its_win95 = true } // WINDOWS ME if (user_agent.indexOf("win 9x 4.90") != -1) { his_winme = true } // WINDOWS 98 else if (( user_agent.indexOf("windows 98") != -1) || (user_agent.indexOf("win98") != -1)) { his_win98 = true } // WINDOWS XP else if ((user_agent.indexOf("windows nt 5.1") != -1) || (user_agent.indexOf("winnt 5.1") != -1)) { his_winxp = true } // WINDOWS 2000 else if ((user_agent.indexOf("windows nt 5.0") != -1) || (user_agent.indexOf("winnt 5.0") != -1)) { his_win2000 = true } // WINDOWS NT else if ((user_agent.indexOf("windows nt") != -1) || (user_agent.indexOf("winnt") != -1)) { his_winnt = true } // MAC 680x0 else if ((user_agent.indexOf("mac") != -1) && ((user_agent.indexOf( "68K") != -1) || (user_agent.indexOf("68000") != -1))) { his_mac68k = true } // MAC PowerPC else if ((user_agent.indexOf("mac") != -1) && ((user_agent.indexOf("ppc") != -1) || (user_agent.indexOf("powerpc") != -1))) { his_macppc = true } // LINUX else if (user_agent.indexOf("linux") != -1) { his_linux = true } // ДРУГАЯ ОС else { his_other_os = true } // ПЛАТФОРМА // Используйте логические значения операционной системы для // определения общей платформы // MAC OS if (its_mac68k || his_macppc) { his_macos = true} // 32-БИТНЫЕ WINDOWS if (its_win95 || his_win98 || his_winme || his_winnt || his_win2000 || his_winxp) {its_win32 = true} // WINDOWS if (its_win31 || his_win32) {its_windows = true} // ПОДДЕРЖКА DHTML if (document.getElementById || document.all || document .layers) { dhtml_ok = true } </script> <script Language="JavaScript" type="text/javascript">  </script> </head> <body onLoad="initialize()">  <div id="viewer1" style="position:absolute; left:10; top:0"> <img src="/u/info_img/2009-06/20/fiesole1 .jpg"> </div> <div id="viewer2" style="position:absolute; left:10; top:0"></div> <div id="controls" style="position:absolute; :10; сверху: 325; ширина: 525; выравнивание текста: по центру; шрифт-вес: жирный"></div> </div> </body> </html>