右下角漂浮图像,能跟随滚动条进行上下移动

2024-04-27 14:00:04

字体：大中小

来源：转载

供稿：网友

<html><head><title>Listing 35.13. A W<a href="http://ip.vevb.com/">ip</a>e Transition for the Incoming Slide</title><script language="<a href="http://www.vevb.com/article.asp?typeid=160">java</a>Script" type="text/<a href="http://www.vevb.com/article.asp?typeid=36">Javascript</a>">// This array holds all of the document's <a href="http://www.vevb.com/article.asp?typeid=40">DHTML</a>-able objectsvar dhtml_objects = new Array()// This function creates the custom objects that serve as cross-browser front-endsfunction create_object_array() {// All the <div> and <span> tags are stored in these variablesvar div_tagsvar span_tagsvar <a href="http://www.vevb.com/article.asp?typeid=38">CSS</a>_tags// Is the browser W3C DOM compliant?if (document.getElementById) {// If so, use getElementsByTagName() to get the <div> tagsdiv_tags = document.getElementsByTagName("div")// Loop through the <div> tagsfor (var counter = 0; counter < div_tags.length; counter++) {// Store the current objectcurrent_object = div_tags[counter]// Store how the browser <a href="http://www.vevb.com/article.asp?typeid=173"><a href="http://www.vevb.com/article.asp?typeid=173">access</a></a>es stylesobject_css = current_object.style// Store the object's idobject_id = current_object.id// Only store those tags that have an idif (object_id) {// create a new dhtml_object and store it in dhtml_objectsdhtml_objects[object_id] = new dhtml_object(current_object,object_css, object_id)}}// Use getElementsByTagName() to get the <span> tagsspan_tags = document.getElementsByTagName("span")// Loop through the <span> tagsfor (var counter = 0; counter < span_tags.length; counter++) {// Store the current objectcurrent_object = span_tags[counter]// Store how the browser accesses stylesobject_css = current_object.style// Store the object's idobject_id = current_object.id// Only store those tags that have an idif (object_id) {// create a new dhtml_object and store it in dhtml_objectsdhtml_objects[object_id] = new dhtml_object(current_object,object_css, object_id)}}}// Is the browser DHTML DOM compliant?else if (document.all) {// If so, use document.all to get the <div> tagsdiv_tags = document.all.tags("div")// Loop through the <div> tagsfor (var counter = 0; counter < div_tags.length; counter++) {// Store the current objectcurrent_object = div_tags[counter]// Store how the browser accesses stylesobject_css = current_object.style// Store the object's idobject_id = current_object.id// Only store those tags that have an idif (object_id) {// create a new dhtml_object and store it in dhtml_objectsdhtml_objects[object_id] = new dhtml_object(current_object,object_css, object_id)}}// Use document.all to get the <span> tagsspan_tags = document.all.tags("span")// Loop through the <span> tagsfor (var counter = 0; counter < span_tags.length; counter++) {// Store the current objectcurrent_object = span_tags[counter]// Store how the browser accesses stylesobject_css = current_object.style// Store the object's idobject_id = current_object.id// Only store those tags that have an idif (object_id) {// create a new dhtml_object and store it in dhtml_objectsdhtml_objects[object_id] = new dhtml_object(current_object,object_css, object_id)}}}// Is the browser LDOM compliant?else if (document.layers) {// Use document.layers to get the positioned <div> and <span> tagscss_tags = document.layers// Loop through the layersfor (var counter = 0; counter < css_tags.length; counter++) {// Store the current objectcurrent_object = css_tags[counter]// Store how the browser accesses stylesobject_css = current_object// Store the object's idobject_id = current_object.id// Only store those tags that have an idif (object_id) {// create a new dhtml_object and store it in dhtml_objectsdhtml_objects[object_id] = new dhtml_object(current_object,object_css, object_id)}}}}function dhtml_object (obj, css, id) {this.obj = objthis.css = cssthis.id = idthis.left = get_leftthis.right = get_rightthis.top = get_topthis.bottom = get_bottomthis.width = get_widththis.height = get_heightthis.visibility = get_visibilitythis.zIndex = get_zIndexthis.move_to = move_tothis.move_by = move_bythis.set_left = set_leftthis.set_top = set_topthis.set_width = set_widththis.set_height = set_heightthis.set_visibility = set_visibilitythis.set_zIndex = set_zIndexthis.move_above = move_abovethis.move_below = move_belowthis.set_backgroundColor = set_backgroundColorthis.set_backgroundImage = set_backgroundImagethis.set_html = set_htmlthis.get_clip_top = get_clip_topthis.get_clip_right = get_clip_rightthis.get_clip_bottom = get_clip_bottomthis.get_clip_left = get_clip_leftthis.get_clip_width = get_clip_widththis.get_clip_height = get_clip_heightthis.resize_clip_to = resize_clip_tothis.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() {// Is this a W3C or DHTML DOM browser?if (!document.layers) {// If so, is the width defined?if (this.css.width) {// If so, return the width <a href="http://pr.vevb.com/">PR</a>opertyreturn parseInt(this.css.width)}else {// If not, return the offsetWidth propertyreturn parseInt(this.obj.offsetWidth)}}else {// If not, return the layer's document widthreturn parseInt(this.obj.document.width)}}function get_height() {// Is this a W3C or DHTML DOM browser?if (!document.layers) {// If so, is the height defined?if (this.css.height) {// If so, return the height propertyreturn parseInt(this.css.height)}else {// If not, return the offsetHeight propertyreturn parseInt(this.obj.offsetHeight)}}else {// If not, return the layer's document heightreturn parseInt(this.obj.document.height)}}function get_visibility() {// Is this a W3C or DHTML DOM browser?if (!document.layers) {// If so, is the visibility defined?if (this.css.visibility) {// If so, return the visibility propertyreturn this.css.visibility}}else {// Otherwise, it's an LDOM browser, so// handle the proprietary visibility valuesif (this.css.visibility == "show") {return "visible"}if (this.css.visibility == "hide") {return "hidden"}}// If we get this far, just return "inherit"return "inherit"}function get_zIndex() {return this.css.zIndex}function move_to (new_left, new_top) {this.css.left = new_leftthis.css.top = new_top}function move_by (delta_left, delta_top) {// Add the delta valuesthis.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) {// Is this a W3C or DHTML DOM browser?if (!document.layers) {// If so, just set the width propertythis.css.width = new_width}}function set_height (new_height) {// Is this a W3C or DHTML DOM browser?if (!document.layers) {// If so, just set the width propertythis.css.height = new_height}}function set_visibility (new_visibility) {// Is this a W3C or DHTML DOM browser?if (!document.layers) {// If so, just set the visibility// to the value of the argumentthis.css.visibility = new_visibility}else {// Otherwise, set the proprietary visibility valuesif (new_visibility == "visible") {this.css.visibility = "show"}else if (new_visibility == "hidden") {this.css.visibility = "hide"}else {this.css.visibility = "inherit"}}}function set_zIndex(new_zindex) {// Is the new z-index greater than 0?if (new_zindex > 0) {// If so, set itthis.css.zIndex = new_zindex}else {// If not, set it to 0this.css.zIndex = 0}}function move_above(reference_object) {this.css.zIndex = reference_object.css.zIndex + 1}function move_below(reference_object) {// Get the z-index of the reference objectreference_zindex = reference_object.css.zIndex// Is it greater than 0?if (reference_zindex > 0) {// If so, set this object's zindex to one lessthis.css.zIndex = reference_zindex - 1}else {// If not, set the reference object's z-index to 1// and this object's z-index to 0reference_object.css.zIndex = 1this.css.zIndex = 0}}function set_backgroundColor(new_color) {// Is this a W3C or DHTML DOM browser?if (!document.layers) {// If so, use the backgroundColor propertythis.css.backgroundColor = new_color}else {// If not, use the bgcolor propertythis.css.bgColor = new_color}}function set_backgroundImage(new_image) {// Is this a W3C or DHTML DOM browser?if (!document.layers) {// If so, use the backgroundImage propertythis.css.backgroundImage = "url(" + new_image + ")"}else {// If not, use the background propertythis.css.background.src = new_image}}function set_html(new_html) {// Is this a W3C or DHTML DOM browser?if (!document.layers) {// If so, use the innerHTML propertythis.obj.innerHTML = new_html}else {// If not, use the document.write() methodthis.obj.document.open()this.obj.document.write(new_html)this.obj.document.close()}}function get_clip_top() {// Is this a W3C or DHTML DOM browser?if (!document.layers) {// If so, first parse the clip stringparse_dom_clip(this)// Clip values are now in the current_clip objectreturn current_clip.top}else {// Otherwise, use clip.topreturn this.css.clip.top}}var current_clipfunction clip_object(top, right, bottom, left) {this.top = topthis.right = rightthis.bottom = bottomthis.left = left}function parse_dom_clip(current_object) {clip_string = current_object.css.clipif (clip_string.length > 0) {var values_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 = 0var 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() {// Is this a W3C or DHTML DOM browser?if (!document.layers) {// If so, first parse the clip stringparse_dom_clip(this)// Clip values are now in the current_clip objectreturn current_clip.right}else {// Otherwise, use clip.rightreturn this.css.clip.right}}function get_clip_bottom() {// Is this a W3C or DHTML DOM browser?if (!document.layers) {// If so, first parse the clip stringparse_dom_clip(this)// Clip values are now in the current_clip objectreturn current_clip.bottom}else {// Otherwise, use clip.bottomreturn this.css.clip.bottom}}function get_clip_left() {// Is this a W3C or DHTML DOM browser?if (!document.layers) {// If so, first parse the clip stringparse_dom_clip(this)// Clip values are now in the current_clip objectreturn current_clip.left}else {// Otherwise, use clip.leftreturn this.css.clip.left}}function get_clip_width() {// Is this a W3C or DHTML DOM browser?if (!document.layers) {// If so, first parse the clip stringparse_dom_clip(this)// Clip values are now in the current_clip objectreturn current_clip.right - current_clip.left}else {// Otherwise, use clip.widthreturn this.css.clip.width}}function get_clip_height() {// Is this a W3C or DHTML DOM browser?if (!document.layers) {// If so, first parse the clip stringparse_dom_clip(this)// Clip values are now in the current_clip objectreturn current_clip.bottom - current_clip.top}else {// Otherwise, use clip.widthreturn 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() }// Is this a W3C or DHTML DOM browser?if (!document.layers) {// Clip values are now in the current_clip objectthis.css.clip = "rect(" + new_top + " " + new_right + " " + new_bottom + " " + new_left + ")"}else {// Otherwise, use clip propertiesthis.css.clip.top = new_topthis.css.clip.right = new_rightthis.css.clip.bottom = new_bottomthis.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_topvar new_right = this.get_clip_right() + delta_rightvar new_bottom = this.get_clip_bottom() + delta_bottomvar new_left = this.get_clip_left() + delta_left// Is this a W3C or DHTML DOM browser?if (!document.layers) {// Clip values are now in the current_clip objectthis.css.clip = "rect(" + new_top + " " + new_right + " " + new_bottom + " " + new_left + ")"}else {// Otherwise, use clip propertiesthis.css.clip.top = new_topthis.css.clip.right = new_rightthis.css.clip.bottom = new_bottomthis.css.clip.left = new_left}}function get_mouse_x(current_event) {// Is this Internet Explorer 4 or later?if (its_ie4plus) {// If so, return the event.clientX propertyreturn event.clientX}// Is this Netscape Explorer 4 or later?else if (its_ns4plus) {// Otherwise, return the pageX propertyreturn current_event.pageX}else {// Otherwise, return nullreturn null}}function get_mouse_y(current_event) {// Is this Internet Explorer 4 or later?if (its_ie4plus) {// If so, return the event.clientY propertyreturn event.clientY}// Is this Netscape Explorer 4 or later?else if (its_ns4plus) {// If so, return the pageY propertyreturn current_event.pageY}else {// Otherwise, return nullreturn null}}function get_client_width() {// Is this Internet Explorer 4 or later?if (its_ie4plus) {// If so, return the clientWidth propertyreturn document.body.clientWidth}else if (its_ns4plus) {// If so, return the innerWidth propertyreturn window.innerWidth - 18}else {// Otherwise, return nullreturn null}}function get_client_height() {// Is this Internet Explorer 4 or later?if (its_ie4plus) {// If so, return the clientHeight propertyreturn document.body.clientHeight}// Is this Netscape Explorer 4 or later?else if (its_ns4plus) {// If so, return the innerHeight propertyreturn window.innerHeight - 18}else {// Otherwise, return nullreturn null}}function get_client_scroll_left() {// Is this Internet Explorer 4 or later?if (its_ie4plus) {// If so, return the scrollLeft propertyreturn document.body.scrollLeft}// Is this Netscape Explorer 4 or later?else if (its_ns4plus) {// If so, return the pageXOffset propertyreturn pageXOffset}else {// Otherwise, return nullreturn null}}function get_client_scroll_top() {// Is this Internet Explorer 4 or later?if (its_ie4plus) {// If so, return the scrollTop propertyreturn document.body.scrollTop}// Is this Netscape Explorer 4 or later?else if (its_ns4plus) {// If so, return the pageYOffset propertyreturn pageYOffset}else {// Otherwise, return nullreturn null}}</script><script language="JavaScript" type="text/javascript">// One of these boolean variables will be// set to true based on the browser namevar its_ie = falsevar its_ns = falsevar its_<a href="http://www.vevb.com/article.asp?typeid=190">Opera</a> = falsevar its_webtv = falsevar its_compatible = false// One of these boolean variables will be set to // true based on the Internet Explorer versionvar its_ie2 = falsevar its_ie3 = falsevar its_ie4 = falsevar its_ie5 = falsevar its_ie55 = falsevar its_ie6 = falsevar its_ie4plus = falsevar its_ie5plus = falsevar its_ie55plus = falsevar its_ie6plus = false// One of these boolean variables will be set to // true based on the Netscape versionvar its_ns2 = falsevar its_ns3 = falsevar its_ns4 = falsevar its_ns6 = falsevar its_ns3plus = falsevar its_ns4plus = falsevar its_ns6plus = false// One of these boolean variables will be// set to true based on the operating systemvar its_win31 = falsevar its_win95 = falsevar its_win98 = falsevar its_winme = falsevar its_winnt = falsevar its_win2000 = falsevar its_winxp = falsevar its_windows = falsevar its_win32 = falsevar its_mac68k = falsevar its_macppc = falsevar its_macos = falsevar its_<a href="http://www.vevb.com/article.asp?typeid=60">linux</a> = falsevar its_other_os = false// This will be true of the browser supports some kind of DHTMLvar dhtml_ok = false// Let's work with lowercase letters to keep things simplevar user_agent = navigator.userAgent.toLowerCase()// BROWSER NAME// Use indexOf() to examine the userAgent string// for telltale signs of the browser nameif (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) {// For "moziila", we need to rule out some other possibilities, firstif ((user_agent.indexOf("compatible") == -1) && (user_agent.indexOf("spoofer") == -1) && (user_agent.indexOf("hotjava") == -1)) {its_ns = true}else { its_compatible = true }}// BROWSER VERSIONvar 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 EXPLORERif (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 }}// NETSCAPEif (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 }}// OPERATING SYSTEM// Use indexOf() to examine the userAgent string// for telltale signs of the operating system// WINDOWS 3.1if ((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 95else if ((user_agent.indexOf("windows 95") != -1) || (user_agent.indexOf("win95") != -1)) { its_win95 = true }// WINDOWS MEif (user_agent.indexOf("win 9x 4.90") != -1) { its_winme = true }// WINDOWS 98else if ((user_agent.indexOf("windows 98") != -1) || (user_agent.indexOf("win98") != -1)) { its_win98 = true }// <a href="http://www.vevb.com/article.asp?typeid=58">Windows xp</a>else if ((user_agent.indexOf("windows nt 5.1") != -1) || (user_agent.indexOf("winnt 5.1") != -1)) { its_winxp = true }// WINDOWS 2000else if ((user_agent.indexOf("windows nt 5.0") != -1) || (user_agent.indexOf("winnt 5.0") != -1)) { its_win2000 = true }// WINDOWS NTelse if ((user_agent.indexOf("windows nt") != -1) || (user_agent.indexOf("winnt") != -1)) { its_winnt = true }// MAC 680x0else if ((user_agent.indexOf("mac") != -1) && ((user_agent.indexOf("68K") != -1) || (user_agent.indexOf("68000") != -1))) { its_mac68k = true }// MAC PowerPCelse if ((user_agent.indexOf("mac") != -1) && ((user_agent.indexOf("ppc") != -1) || (user_agent.indexOf("powerpc") != -1))) { its_macppc = true }// LINUXelse if (user_agent.indexOf("linux") != -1) { its_linux = true }// OTHER OSelse { its_other_os = true }// PLATFORM// Use the operating system booleans to// determine the general platform// MAC OSif (its_mac68k || its_macppc) { its_macos = true}// 32-BIT WINDOWSif (its_win95 || its_win98 || its_winme || its_winnt || its_win2000 || its_winxp) {its_win32 = true}// WINDOWSif (its_win31 || its_win32) {its_windows = true}// DHTML SUPPORTif (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="http://www.mcfedries.com/graphics/fiesole1.jpg"></div><div id="viewer2" style="position:absolute; left:10; top:0"></div><div id="controls" style="position:absolute; left:10; top:325; width: 525; text-align: center; font-weight:bold"></div></div></body></html>

上一篇：3D旋转的立方体特效代码

下一篇：左下角漂浮图像,能跟随滚动条进行上下移动