右下隅のフローティング画像はスクロールバーに従って上下に移動できます

著者：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> タグをループします (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) } } // getElementsByTagName() を使用して <span> タグを取得します。 = document.getElementsByTagName("span") // <span> タグをループします (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_objects[object_id] = new dhtml_object(current_object, object_css, object_id) } } } // ブラウザは DHTML DOM に準拠していますか? else if (document.all) { // その場合、document.all を使用して <div> タグを取得します div_tags = document.all.tags("div") // <div> タグをループします (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) } } // document.all を使用して <span > tagsspan_tags = document.all.tags("span") // <span> タグをループします (var counter = 0; counter < span_tags.length; counter++) { // 現在のオブジェクトを保存します current_object = scan_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) } } } // ブラウザは 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 を持つタグのみを保存します 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_clip_height this.resize_c lip_to =size_clip_to this.resize_clip_by = size_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) { // 存在する場合は、高さプロパティを返します 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_by (delta_left, delta_top) { // デルタを追加します値 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) { // その場合は、width プロパティを設定するだけです this.css.width = new_width } } function set_height (new_height) { // これは W3C または DHTML DOM ブラウザですか? if (!document.layers) { // その場合は、width プロパティを設定するだけです 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 == " visible") { this.css.visibility = "表示" } else if (new_visibility == "hidden") { 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 インデックスを取得しますreference_zindex =reference_object.css.zIndex // 0 より大きいか? if (reference_zindex > 0) { // そうである場合は、このオブジェクトの z-index を 1 つ少ない値に設定します this.css.zIndex =reference_zindex - 1 } else { // そうでない場合は、参照オブジェクトの z-index を 1 に設定します // そしてこのオブジェクトのz-index to 0reference_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 { // そうでない場合は、backgroundImage プロパティを使用します 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 function Clip_object(top, right,bottom, left) { 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 値の文字列 = クリップ_文字列.スライス(5, クリップ_文字列.長さ - 1) var クリップ値 = 値_文字列.split(" ") var クリップ_トップ = 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() { // これは 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 { // それ以外の場合は、clip を使用します。 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 { // それ以外の場合は、clip を使用します。 width return this.css.clip.height } } function raise_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 sinner_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 / / これは 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_event) { // これは Internet Explorer 4 以降ですか? if (its_ie4plus) { // 存在する場合は、event.clientX プロパティを返します returnevent.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 プロパティを返します returnevent.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 { // それ以外の場合、 return 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"> / / これらのブール変数の 1 つは、ブラウザ名に基づいて // true に設定されます。 var its_ie = false var its_ns = false var its_opera = false var its_webtv = false var its_compatibility = false // これらのブール変数の 1 つは // に設定されます。 / 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_ie5plus = false var its_ie55plus = false var its_ie6plus = false //これらのブール変数の 1 つは、Netscape のバージョンに基づいて // 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 // これらの 1 つブール変数は // オペレーティングシステムに基づいて true に設定されます。 var its_win31 = false var its_win95 = false var itswin98 = false var its_winme = false var its_winnt = false var its_win2000 = false var its_winxp = false var its_windows = false var its_win32 = false var its_mac68k = false var its_macppc = false var its_macos = false var its_linux = false var its_other_os = false // ブラウザがある種の DHTML をサポートしている場合はこれが当てはまります var dhtml_ok = false // 物事を単純にするために小文字を使用しましょう var user_agent = navigator.userAgent.toLowerCase() // ブラウザ名 // userAgent 文字列を調べるには、indexOf() を使用します // ブラウザ名の証拠となる兆候 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("compatibility") == -1) && (user_agent.indexOf) ("spoofer") == -1) && (user_agent.indexOf("hotjava") == -1)) { its_ns = true } else { its_compatibility = 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 (version_string) } // INTERNET EXPLORER if (its_ie || 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 == 5) { its_ie5 = 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 >= 5) { its_ie5plus = true } if (full_version >= 5.5) { its_ie55plus = true } if (major_version >= 6) { its_ie6plus = true } } // NETSCAPE if (its_ns) { if (major_version < 3) { its_ns2 = true } else 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_ns3plus = true } if (major_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("16 ビット") != -1) || (user_agent.indexOf("16 ビット") != -1)) { its_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) { 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 } // その他の OS else { its_other_os = true } // プラットフォーム // オペレーティングシステムのブール値を使用して、 // 一般的なプラットフォームを決定します // MAC OS if (its_mac68k || its_macppc) { its_macos = true} // 32 ビット WINDOWS if (its_win95 || its_win98 || its_winme || its_winnt || its_winxp) {its_win32 = true} // WINDOWS if (its_win31 || its_win32) {its_windows = true} // DHTML SUPPORT if (document.getElementById || document.all || ドキュメント.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:10; top:0"></div> <div id="controls" style="position:absolute; :10; トップ:325; テキスト整列:中央;</div> </div> </body> </html>