右下角漂浮影像,能跟隨捲軸進行上下移動

作者：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> 標籤遍歷 <div>counter = 0; counter < div_tags .length; counter++) { // 儲存目前物件current_object = div_tags[counter] // 儲存瀏覽器存取樣式的方式object_css = current_object.style // 儲存物件的id object_id = current_object.id // 只儲存那些標籤有id // if (object_id) { // 建立一個新的dhtml_object 並儲存在dhtml_objects 中dhtml_objects[object_id] = new dhtml_object(current_object, object_css, object_id) } } getElementsByTagName("span") // 循環遍歷<span> 標籤for (var counter = 0; counter < span_tags.length; counter++) { // 儲存目前物件current_object = span_tags[counter] // 儲存方式瀏覽器存取樣式object_object = span_tags[counter] // 儲存方式瀏覽器存取樣式object_css = current_object.style // 儲存物件的id object_id = current_object.id // 只儲存那些具有id 的標籤if (object_id) { // 建立一個新的dhtml_object 並將其儲存在dhtml_objects 中dhtml_objects[object_objects[object_objects 中dhtml_objects[object_objects[object_objects [objects[objects[objects[objects] (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 // 儲存物件的id object_id = current_object.id // 僅儲存那些儲存那些儲存的那些。具有id 的標籤if (object_id) { // 建立一個新的dhtml_object 並將其儲存在dhtml_objects 中dhtml_objects[object_id] = new dhtml_object(current_object, object_css, object_id) } 以使用比較m.d 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 // 儲存物件的id object_id = current_object.id // 只儲存那些具有id 的標籤if (object_id) { // 建立一個新的dhtml_object 並將其儲存在dhtml_objects dhtml_object 並將其儲存在dhtml_objects dhtml_object [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 // 儲存物件的id object_id = current_object.id // 只儲存那些有id 的標籤 (object_id ) {object_id ) { // 建立一個新的dhtml_object 並儲存在dhtml_objects 中dhtml_objects[object_id] = new dhtml_object(current_object, object_css, object_id) } } } }objunction dhtml_object (object, object,obj. = 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.height = this. = 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_visbidth this.set_height = set_height this.set_visibility = set_visbility this.bovezdem. = 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 = getslip_left_lipdft_lip_left_lip. get_clip_width this.get_clip_height = get_clip_height 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() { // 這是W3C 還是DHTML DOM 瀏覽器？ if (!document.layers) { // 如果是，寬度是否已定義？ if (this.css.width) { // 如果是，則傳回 width 屬性 return parseInt(this.css.width) } else { // 如果不是，則傳回 offsetWidth 屬性 return parseInt(this.obj.offsetWidth) } } else { // 如果不是，則傳回圖層的文件寬度return parseInt(this.obj.document.width) } } function get_height() { // 這是W3C 還是DHTML DOM 瀏覽器？ if (!document.layers) { // 如果是這樣，高度是否已定義？ if (this.css.height) { // 如果是，則傳回 height 屬性 return parseInt(this.css.height) } else { // 如果不是，則傳回 offsetHeight 屬性 return parseInt(this.obj.offsetHeight) } } else { // 如果不是，則傳回圖層的文檔高度return parseInt(this.obj.document.height) } } function get_visibility() { // 這是W3C 還是DHTML DOM 瀏覽器？ 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" } } // 如果我們走到這一步，只需return " 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 { // 新增增量值this.css.left = this.left() + parseInt(delta_left) this.css.top = this.top() + parseInt(delta_top) } 函數set_left (new_left) { this.css. left = new_left } 函數set_top (new_top) { this.css.top = new_top } function set_width (new_width) { // 這是 W3C 還是 DHTML DOM 瀏覽器？ if (!document.layers) { // 如果是這樣，只要設定寬度屬性 this.css.width = new_width } } function set_height (new_height) { // 這是 W3C 還是 DHTML DOM 瀏覽器？ if (!document.layers) { // 如果是，只要設定寬度屬性 this.css.height = new_height } } function set_visibility (new_visibility) { // 這是 W3C 還是 DHTML DOM 瀏覽器？ if (!document.layers) { // 如果是這樣，只需將可見性設定為參數的值 this.css.visibility = new_visibility } else { // 否則，設定專有可見性值 if (new_visibility == "可見") { this.css.visibility = "顯示" } else if (new_visibility == "隱藏") { this.css.visibility = "隱藏" } else { this.css.visibility = "繼承" } } } 函數set_zIndex(new_zindex) { // 新的z-index 是否大於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-index reference_zindex = reference_object.css.zIndex // 是否大於0？ if (reference_zindex > 0) { // 如果是，則將此物件的zindex 減一this.css.zIndex = reference_zindex - 1 } else { // 如果不是，則將引用物件的z-index 設為1 //而此物件的z-index z-index to 0 reference_object.css.zIndex = 1 this.css.zIndex = 0 } } function set_backgroundColor(new_color) { // 這是 W3C 還是 DHTML DOM 瀏覽器？ if (!document.layers) { // 如果是，則使用 backgroundColor 屬性 this.css.backgroundColor = new_color } else { // 如果不是，則使用 bgcolor 屬性 this.css.bgColor = new_color } } function set_backgroundImage(new_image) { // 這是W3C 還是DHTML DOM 瀏覽器？ if (!document.layers) { // 如果是，則使用backgroundImage屬性this.css.backgroundImage = "url(" + new_image + ")" } else { // 如果不是，則使用background屬性this. css.background .src = new_image } } function set_html(new_html) { // 這是 W3C 還是 DHTML DOM 瀏覽器？ 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() { // 這是W3C 還是DHTML DOM 瀏覽器？ if (!document.layers) { // 如果是這樣，先解析剪輯字串 parse_dom_clip(this) // 剪輯值現在位於 current_clip 物件中 return current_clip.top } else { // 否則，使用clip.top return this。 css.clip.top } } var current_clip 函數clip_object(上、右、下、左) { this.top = 頂部this.right = 右this.bottom = 底部this.left = 左} function parse_dom_clip(current_object) { Clip_string = current_object.css.clip if (clip_string.length > 0) { var Values_string = Clip_string.slice(5, Clip_string.length - 1) var Clip_values = Values_string.split(" " ") parlip_top Clip_values = Values_string.split(" "") parlip_top_topvvv)' 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_objrent(Fydol. () var Clip_left = 0 } current_clip = new Clip_object(clip_top,clip_right,clip_bottom,clip_left) } function get_clip_right() { // 這是W3C 還是DHTML DOM 瀏覽器？ 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() { // 這是W3C 還是DHTML DOM 瀏覽器？ 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() { // 這是W3C 還是DHTML DOM 瀏覽器？ 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() { // 這是W3C 還是DHTML DOM 瀏覽器？ if (!document.layers) { // 如果是這樣，先解析剪輯字串 parse_dom_clip(this) // 剪輯值現在位於 current_clip 物件中 return current_clip.right - current_clip.left } else { // 否則，使用剪輯。 width return this.css.clip.width } } function get_clip_height() { // 這是W3C 還是DHTML DOM 瀏覽器？ if (!document.layers) { // 如果是這樣，先解析剪輯字串 parse_dom_clip(this) // 剪輯值現在位於 current_clip 物件中 return current_clip.bottom - current_clip.top } else { // 否則，使用剪輯。 width 回傳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() } // 這是一個W3C 或DHTML DOM 瀏覽器？ 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_bycss.clip.left = new_left } } function resize_clip_bycss. 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_botft. left / /這是W3C 或DHTML DOM 瀏覽器嗎？ 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_eventx( 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) { // 如果是，則傳回 innerWidth 屬性 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) { // 如果是，則回傳innerHeight 屬性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 its_ie = false var its_ns = false var its_opera = false var its_webtv = false var its_company = false // 這些布林變數之一將設為 / / true 基於Internet Explorer版本var its_ie2 = false var its_ie3 = false var its_ie4 = false var its_ie5 = false var its_ie55 = false var its_ie6 = false var its_ie4plus = false var its_ief5plus = false 75這些布林變數之一將被設定為true var its_ns2 = false var its_ns3 = false var its_ns4 = false var its_ns6 = false var its_ns3plus = false var its_ns4plus = false var its_ns6plus = false var its_ns4plus = false var its_ns6plus = false //設定為true var its_win31 = false var its_win95 = false var its_win98 = false var its_winme = false var its_winnt = false var its_win2000 = false var its_winxp = false var its_win2000 = false var its_winxp = false var its_win. alse var its_macppc = false var its_macos = false var its_linux = false var its_other_os = false // 如果瀏覽器支援某種DHTML，則為true var dhtml_ok = false // 讓我們使用小寫字母來保持簡單var user_agent = navigator.userAgent.toLowerCase() // 瀏覽器名稱// 使用indexOf() 檢查userAgent 字串// 瀏覽器名稱的明顯標誌if (user_agent.indexOf("opera") != -1) { its_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 ("spoofer") == -1) && (user_agent. indexOf("hotjava") == -1)) {its_ns = true } else {its_company = true } } // 瀏覽器版本var Major_version = parseInt(navigator.appVersion) ) var full_version = parseFloat(navigator.appVersion) var ieapp_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_version = parseInt(version_string) full_version = parseFloat (version_string) } || its_webtv) { if (major_version < 3) { its_ie2 = true } else if (major_version == 3) { its_ie3 = true } else if (major_version == 4) { its_ie4 = true } else if (major_version == 4) { its_ie4 = true } else if. = true } else if (full_version == 5.5) { its_ie55 = true } else if (major_version == 6) { its_ie6 = true } if (major_version >= 4) { its_ie4plus = true } if (major_version >= 4) { its_ie4plus = true } if (major_version { = true } if (full_version >= 5.5) { its_ie55plus = true } if (major_version >= 6) { its_ie6plus = true } } // NETSCAPE if (its_ns) { if (major_version < 3) { // NETSCA2 = if Major_version < 4) {its_ns3 = true } else if (major_version == 4) {its_ns4 = true } else if (major_version == 5) {its_ns6 = true } if (major_version >= 3) {its_ns3 = true_version( >= 4) {its_ns4plus = true } if (major_version >= 5) {its_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)) { its_win31 = true } // WINDOWS 95 else if ((user_agent.indexOf("windows 95") != -1) || (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) { its_winme = true } // WINDOWS 98 else if (( user_agent.indexOf("windows 98") != -1) || (user_agent.indexOf("win98") != -1)) { its_win98 = true } // WINDOWS XP else if ((user_agent.indexOf("windows nt 5.1") != -1) || (user_agent.indexOf("winnt 5.1") != -1)) { its_winxp = true } // WINDOWS 2000 else if ((user_agent.indexOf("windows nt 5.0") != -1) || (user_agent.indexOf("winnt 5.0") != -1)) { its_win2000 = true } // WINDOWS NT else if ((user_agent.indexOf("windows nt") != -1) || (user_agent.indexOf("winnt") != -1)) { its_winnt = true } // MAC 680x0 else if ((user_agent.indexOf("mac") != -1) && ((user_agent.indexOf( "68K") != -1) || (user_agent.indexOf("68000") != -1))) { its_mac68k = true } // MAC PowerPC else if ((user_agent.indexOf("mac") != -1) && ((user_agent.indexOf("ppc") != -1) || (user_agent.indexOf("powerpc") != -1))) { its_macppc = true } // LINUX else if (user_agent.indexOf("linux") != -1) { its_linux = true } // 其他作業系統else {its_other_os = true } // PLATFORM // 使用作業系統布林值 // 決定通用平台 // MAC OS if (its_mac68k ||its_macppc) {its_macos = true} // 32-BIT WINDOWS if (its_win95 ||its_win98 | |its_winme ||its_win2000 ||its_winxp) {its_win32 = true} // WINDOWS if (its_win31 || its_win32) {its_windows = true} // DHTML 支援if (document.getElementById || document.all ||. 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; 寬度: 525; 字體粗細"></div> </div> </body> </html>