分享
 
 
 

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

王朝other·作者佚名  2008-05-31
窄屏简体版  字體: |||超大  

<html>

<head>

<title>Listing 35.13. A Wipe Transition for the Incoming Slide</title>

<script language="JavaScript" type="text/javascript">

// This array holds all of the document's DHTML-able objects

var dhtml_objects = new Array()

// This function creates the custom objects that serve as cross-browser front-ends

function create_object_array() {

// All the <div> and <span> tags are stored in these variables

var div_tags

var span_tags

var css_tags

// Is the browser W3C DOM compliant?

if (document.getElementById) {

// If so, use getElementsByTagName() to get the <div> tags

div_tags = document.getElementsByTagName("div")

// Loop through the <div> tags

for (var counter = 0; counter < div_tags.length; counter++) {

// Store the current object

current_object = div_tags[counter]

// Store how the browser accesses styles

object_css = current_object.style

// Store the object's id

object_id = current_object.id

// Only store those tags that have an id

if (object_id) {

// create a new dhtml_object and store it in dhtml_objects

dhtml_objects[object_id] = new dhtml_object(current_object,

object_css,

object_id)

}

}

// Use getElementsByTagName() to get the <span> tags

span_tags = document.getElementsByTagName("span")

// Loop through the <span> tags

for (var counter = 0; counter < span_tags.length; counter++) {

// Store the current object

current_object = span_tags[counter]

// Store how the browser accesses styles

object_css = current_object.style

// Store the object's id

object_id = current_object.id

// Only store those tags that have an id

if (object_id) {

// create a new dhtml_object and store it in dhtml_objects

dhtml_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> tags

div_tags = document.all.tags("div")

// Loop through the <div> tags

for (var counter = 0; counter < div_tags.length; counter++) {

// Store the current object

current_object = div_tags[counter]

// Store how the browser accesses styles

object_css = current_object.style

// Store the object's id

object_id = current_object.id

// Only store those tags that have an id

if (object_id) {

// create a new dhtml_object and store it in dhtml_objects

dhtml_objects[object_id] = new dhtml_object(current_object,

object_css,

object_id)

}

}

// Use document.all to get the <span> tags

span_tags = document.all.tags("span")

// Loop through the <span> tags

for (var counter = 0; counter < span_tags.length; counter++) {

// Store the current object

current_object = span_tags[counter]

// Store how the browser accesses styles

object_css = current_object.style

// Store the object's id

object_id = current_object.id

// Only store those tags that have an id

if (object_id) {

// create a new dhtml_object and store it in dhtml_objects

dhtml_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> tags

css_tags = document.layers

// Loop through the layers

for (var counter = 0; counter < css_tags.length; counter++) {

// Store the current object

current_object = css_tags[counter]

// Store how the browser accesses styles

object_css = current_object

// Store the object's id

object_id = current_object.id

// Only store those tags that have an id

if (object_id) {

// create a new dhtml_object and store it in 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_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() {

// 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 property

return parseInt(this.css.width)

}

else {

// If not, return the offsetWidth property

return parseInt(this.obj.offsetWidth)

}

}

else {

// If not, return the layer's document width

return 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 property

return parseInt(this.css.height)

}

else {

// If not, return the offsetHeight property

return parseInt(this.obj.offsetHeight)

}

}

else {

// If not, return the layer's document height

return 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 property

return this.css.visibility

}

}

else {

// Otherwise, it's an LDOM browser, so

// handle the proprietary visibility values

if (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_left

this.css.top = new_top

}

function move_by (delta_left, delta_top) {

// Add the delta values

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) {

// Is this a W3C or DHTML DOM browser?

if (!document.layers) {

// If so, just set the width property

this.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 property

this.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 argument

this.css.visibility = new_visibility

}

else {

// Otherwise, set the proprietary visibility values

if (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 it

this.css.zIndex = new_zindex

}

else {

// If not, set it to 0

this.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 object

reference_zindex = reference_object.css.zIndex

// Is it greater than 0?

if (reference_zindex > 0) {

// If so, set this object's zindex to one less

this.css.zIndex = reference_zindex - 1

}

else {

// If not, set the reference object's z-index to 1

// and this object's z-index to 0

reference_object.css.zIndex = 1

this.css.zIndex = 0

}

}

function set_backgroundColor(new_color) {

// Is this a W3C or DHTML DOM browser?

if (!document.layers) {

// If so, use the backgroundColor property

this.css.backgroundColor = new_color

}

else {

// If not, use the bgcolor property

this.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 property

this.css.backgroundImage = "url(" + new_image + ")"

}

else {

// If not, use the background property

this.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 property

this.obj.innerHTML = new_html

}

else {

// If not, use the document.write() method

this.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 string

parse_dom_clip(this)

// Clip values are now in the current_clip object

return current_clip.top

}

else {

// Otherwise, use clip.top

return this.css.clip.top

}

}

var current_clip

function clip_object(top, right, bottom, left) {

this.top = top

this.right = right

this.bottom = bottom

this.left = 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(" ")

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() {

// Is this a W3C or DHTML DOM browser?

if (!document.layers) {

// If so, first parse the clip string

parse_dom_clip(this)

// Clip values are now in the current_clip object

return current_clip.right

}

else {

// Otherwise, use clip.right

return 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 string

parse_dom_clip(this)

// Clip values are now in the current_clip object

return current_clip.bottom

}

else {

// Otherwise, use clip.bottom

return 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 string

parse_dom_clip(this)

// Clip values are now in the current_clip object

return current_clip.left

}

else {

// Otherwise, use clip.left

return 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 string

parse_dom_clip(this)

// Clip values are now in the current_clip object

return current_clip.right - current_clip.left

}

else {

// Otherwise, use clip.width

return 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 string

parse_dom_clip(this)

// Clip values are now in the current_clip object

return current_clip.bottom - current_clip.top

}

else {

// Otherwise, use 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() }

// Is this a W3C or DHTML DOM browser?

if (!document.layers) {

// Clip values are now in the current_clip object

this.css.clip = "rect(" + new_top + " " + new_right + " " +

new_bottom + " " + new_left + ")"

}

else {

// Otherwise, use clip properties

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

// Is this a W3C or DHTML DOM browser?

if (!document.layers) {

// Clip values are now in the current_clip object

this.css.clip = "rect(" + new_top + " " + new_right + " " +

new_bottom + " " + new_left + ")"

}

else {

// Otherwise, use clip properties

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) {

// Is this Internet Explorer 4 or later?

if (its_ie4plus) {

// If so, return the event.clientX property

return event.clientX

}

// Is this Netscape Explorer 4 or later?

else if (its_ns4plus) {

// Otherwise, return the pageX property

return current_event.pageX

}

else {

// Otherwise, return null

return null

}

}

function get_mouse_y(current_event) {

// Is this Internet Explorer 4 or later?

if (its_ie4plus) {

// If so, return the event.clientY property

return event.clientY

}

// Is this Netscape Explorer 4 or later?

else if (its_ns4plus) {

// If so, return the pageY property

return current_event.pageY

}

else {

// Otherwise, return null

return null

}

}

function get_client_width() {

// Is this Internet Explorer 4 or later?

if (its_ie4plus) {

// If so, return the clientWidth property

return document.body.clientWidth

}

else if (its_ns4plus) {

// If so, return the innerWidth property

return window.innerWidth - 18

}

else {

// Otherwise, return null

return null

}

}

function get_client_height() {

// Is this Internet Explorer 4 or later?

if (its_ie4plus) {

// If so, return the clientHeight property

return document.body.clientHeight

}

// Is this Netscape Explorer 4 or later?

else if (its_ns4plus) {

// If so, return the innerHeight property

return window.innerHeight - 18

}

else {

// Otherwise, return null

return null

}

}

function get_client_scroll_left() {

// Is this Internet Explorer 4 or later?

if (its_ie4plus) {

// If so, return the scrollLeft property

return document.body.scrollLeft

}

// Is this Netscape Explorer 4 or later?

else if (its_ns4plus) {

// If so, return the pageXOffset property

return pageXOffset

}

else {

// Otherwise, return null

return null

}

}

function get_client_scroll_top() {

// Is this Internet Explorer 4 or later?

if (its_ie4plus) {

// If so, return the scrollTop property

return document.body.scrollTop

}

// Is this Netscape Explorer 4 or later?

else if (its_ns4plus) {

// If so, return the pageYOffset property

return pageYOffset

}

else {

// Otherwise, return null

return null

}

}

</script>

<script language="JavaScript" type="text/javascript">

// One of these boolean variables will be

// set to true based on the browser name

var its_ie = false

var its_ns = false

var its_opera = false

var its_webtv = false

var its_compatible = false

// One of these boolean variables will be set to

// true based on the Internet Explorer version

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

// One of these boolean variables will be set to

// true based on the Netscape version

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

// One of these boolean variables will be

// set to true based on the operating system

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_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

// This will be true of the browser supports some kind of DHTML

var dhtml_ok = false

// Let's work with lowercase letters to keep things simple

var user_agent = navigator.userAgent.toLowerCase()

// BROWSER NAME

// Use indexOf() to examine the userAgent string

// for telltale signs of the browser name

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) {

// For "moziila", we need to rule out some other possibilities, first

if ((user_agent.indexOf("compatible") == -1) &&

(user_agent.indexOf("spoofer") == -1) &&

(user_agent.indexOf("hotjava") == -1)) {

its_ns = true

}

else { its_compatible = true }

}

// BROWSER VERSION

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 }

}

// OPERATING SYSTEM

// Use indexOf() to examine the userAgent string

// for telltale signs of the operating system

// 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("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 }

// OTHER OS

else { its_other_os = true }

// PLATFORM

// Use the operating system booleans to

// determine the general platform

// MAC OS

if (its_mac68k || its_macppc) { its_macos = true}

// 32-BIT WINDOWS

if (its_win95 || its_win98 || its_winme || its_winnt || its_win2000 || its_winxp) {its_win32 = true}

// WINDOWS

if (its_win31 || its_win32) {its_windows = true}

// DHTML SUPPORT

if (document.getElementById || document.all || document.layers) {

dhtml_ok = true

}

</script>

<script language="JavaScript" type="text/javascript">

<!--

var slides = new Array()

var slide_width = 525

var slide_height = 296

slides[0] = new Image(slide_width, slide_height)

slides[0].src = "http://www.mcfedries.com/graphics/fiesole1.jpg"

slides[0].caption = "A 3,000-seat Roman theatre from about 100 BC (Fiesole, Italy)"

slides[1] = new Image(slide_width, slide_height)

slides[1].src = "http://www.mcfedries.com/graphics/fiesole2.jpg"

slides[1].caption = "Etruscan ruins from about 600 BC (Fiesole, Italy)"

slides[2] = new Image(slide_width, slide_height)

slides[2].src = "http://www.mcfedries.com/graphics/florence04.jpg"

slides[2].caption = "The Piazza Della Signoria (Florence, Italy)"

slides[3] = new Image(slide_width, slide_height)

slides[3].src = "http://www.mcfedries.com/graphics/florence06.jpg"

slides[3].caption = "The Boboli Gardens (Florence, Italy)"

// Use these variables to configure the viewer

var scroll_amount = 10

var scroll_delay = 50

var timeout_id

var current_slide = 0

var pending_slide = 1

var scrolling

var transitions = new Array("slide", "wipe")

var h_directions = new Array("left", "right", "both", "none")

var v_directions = new Array("down", "up", "both", "none")

var viewer_data = new viewer_data_object()

// This function creates the viewer object

function viewer_data_object(width, height, top, left, scrollamount) {}

function initialize() {

// If this is a non-DHTML browser, bail out

if (!dhtml_ok) { return }

// create the DHTML objects

create_object_array()

// Set up the viewer object

viewer_data.width = dhtml_objects['viewer1'].width()

viewer_data.height = dhtml_objects['viewer1'].height()

viewer_data.top = dhtml_objects['viewer1'].top()

viewer_data.left = dhtml_objects['viewer1'].left()

viewer_data.scrollamount = scroll_amount

viewer_data.scrolldelay = scroll_delay

viewer_data.scroll_start = slide_width

viewer_data.transition = transitions[0]

viewer_data.h_direction = h_directions[0]

viewer_data.v_direction = v_directions[0]

write_controls()

}

// This function sets the initial viewer position and clip region

function initialize_viewer() {

// Hide viewer2

dhtml_objects['viewer2'].set_visibility("hidden")

// Put in the main image

dhtml_objects['viewer1'].set_html('<img src="' + slides[current_slide].src + '">')

// Reset it for full viewing

dhtml_objects['viewer1'].move_to(viewer_data.left, viewer_data.top)

dhtml_objects['viewer1'].resize_clip_to(0, viewer_data.width, viewer_data.height, 0)

// select a random transition

viewer_data.transition = transitions[Math.floor(transitions.length * Math.random())]

viewer_data.h_direction = h_directions[Math.floor(h_directions.length * Math.random())]

viewer_data.v_direction = v_directions[Math.floor(v_directions.length * Math.random())]

// Set the scrolling flag

scrolling = true

// update the controls

write_controls()

if (viewer_data.transition == "slide") {

slide_out()

}

else {

wipe_out()

}

}

function next_slide() {

// Change the pending slide number

pending_slide = current_slide + 1

initialize_viewer()

}

function previous_slide() {

// Change the pending slide number

pending_slide = current_slide - 1

initialize_viewer()

}

function slide_out() {

// Check the width and height of the object's clip region

if (dhtml_objects['viewer1'].get_clip_width() > 0 &&

dhtml_objects['viewer1'].get_clip_height() > 0) {

// If both are still positive, keep sliding

var horizontal_move = 0

var vertical_move = 0

var top_resize = 0

var right_resize = 0

var bottom_resize = 0

var left_resize = 0

// Get the horizontal adjustments

if (viewer_data.h_direction == "left") {

horizontal_move = -viewer_data.scrollamount

left_resize = viewer_data.scrollamount

}

else if (viewer_data.h_direction == "right") {

horizontal_move = viewer_data.scrollamount

right_resize = -viewer_data.scrollamount

}

else if (viewer_data.h_direction == "both") {

left_resize = viewer_data.scrollamount

right_resize = -viewer_data.scrollamount

}

// Get the vertical adjustments

if (viewer_data.v_direction == "down") {

vertical_move = viewer_data.scrollamount

bottom_resize = -viewer_data.scrollamount

}

else if (viewer_data.v_direction == "up") {

vertical_move = -viewer_data.scrollamount

top_resize = viewer_data.scrollamount

}

else if (viewer_data.v_direction == "both") {

bottom_resize = -viewer_data.scrollamount

top_resize = viewer_data.scrollamount

}

// Move the object

dhtml_objects['viewer1'].move_by(horizontal_move, vertical_move)

// Adjust the clip region

dhtml_objects['viewer1'].resize_clip_by(top_resize,

right_resize,

bottom_resize,

left_resize)

// Set a new timeout

timeout_id = setTimeout("slide_out()", viewer_data.scrolldelay)

write_controls()

}

else {

// Clear the timeout

clearTimeout(timeout_id)

// The pending slide is now the current slide

current_slide = pending_slide

// Prepare the incoming slide

prepare_next_slide()

}

}

function wipe_out() {

// Check the width and height of the object's clip region

if (dhtml_objects['viewer1'].get_clip_width() > 0 &&

dhtml_objects['viewer1'].get_clip_height() > 0) {

// If both are still positive, keep wiping

var top_resize = 0

var right_resize = 0

var bottom_resize = 0

var left_resize = 0

// Get the horizontal adjustments

if (viewer_data.h_direction == "left") {

right_resize = -viewer_data.scrollamount

}

else if (viewer_data.h_direction == "right") {

left_resize = viewer_data.scrollamount

}

else if (viewer_data.h_direction == "both") {

left_resize = viewer_data.scrollamount

right_resize = -viewer_data.scrollamount

}

// Get the vertical adjustments

if (viewer_data.v_direction == "down") {

top_resize = viewer_data.scrollamount

}

else if (viewer_data.v_direction == "up") {

bottom_resize = -viewer_data.scrollamount

}

else if (viewer_data.v_direction == "both") {

bottom_resize = -viewer_data.scrollamount

top_resize = viewer_data.scrollamount

}

// Adjust the clip region

dhtml_objects['viewer1'].resize_clip_by(top_resize,

right_resize,

bottom_resize,

left_resize)

// Set a new timeout

timeout_id = setTimeout("wipe_out()", viewer_data.scrolldelay)

}

else {

// Clear the timeout

clearTimeout(timeout_id)

// The pending slide is now the current slide

current_slide = pending_slide

// Prepare the incoming slide

prepare_next_slide()

}

}

function stop_it() {

// Shut down the viewer by clearing the current timeout

clearTimeout(timeout_id)

// Clear the scrolling flag

scrolling = false

// update the controls

write_controls()

}

function prepare_next_slide() {

// select a random wipe transition

viewer_data.transition = "wipe"

viewer_data.h_direction = h_directions[Math.floor(h_directions.length * Math.random())]

viewer_data.v_direction = v_directions[Math.floor(v_directions.length * Math.random())]

var top_clip_start = 0

var right_clip_start = viewer_data.width

var bottom_clip_start = viewer_data.height

var left_clip_start = 0

// Get the horizontal adjustments

if (viewer_data.h_direction == "left") {

left_clip_start = viewer_data.width

}

else if (viewer_data.h_direction == "right") {

right_clip_start = 0

}

else if (viewer_data.h_direction == "both") {

left_clip_start = Math.floor(viewer_data.width / 2)

right_clip_start = Math.floor(viewer_data.width / 2)

}

// Get the vertical adjustments

if (viewer_data.v_direction == "down") {

bottom_clip_start = 0

}

else if (viewer_data.v_direction == "up") {

top_clip_start = viewer_data.height

}

else if (viewer_data.v_direction == "both") {

bottom_clip_start = Math.floor(viewer_data.height / 2)

top_clip_start = Math.floor(viewer_data.height / 2)

}

// Add the image

dhtml_objects['viewer2'].set_html('<img src="' + slides[current_slide].src + '">')

// Make the object visible

dhtml_objects['viewer2'].set_visibility("visible")

// Resize it

dhtml_objects['viewer2'].resize_clip_to(top_clip_start,

right_clip_start,

bottom_clip_start,

left_clip_start)

// Do the wipe transition

wipe_in()

}

function wipe_in() {

// Compare the clip width and height with the object width and height

if (dhtml_objects['viewer2'].get_clip_width() < viewer_data.width ||

dhtml_objects['viewer2'].get_clip_height() < viewer_data.height) {

// If either one is less, keep wiping

var top_resize = 0

var right_resize = 0

var bottom_resize = 0

var left_resize = 0

// Get the horizontal adjustments

if (viewer_data.h_direction == "left") {

left_resize = -viewer_data.scrollamount

}

else if (viewer_data.h_direction == "right") {

right_resize = viewer_data.scrollamount

}

else if (viewer_data.h_direction == "both") {

left_resize = -viewer_data.scrollamount

right_resize = viewer_data.scrollamount

}

// Get the vertical adjustments

if (viewer_data.v_direction == "down") {

bottom_resize = viewer_data.scrollamount

}

else if (viewer_data.v_direction == "up") {

top_resize = -viewer_data.scrollamount

}

else if (viewer_data.v_direction == "both") {

bottom_resize = viewer_data.scrollamount

top_resize = -viewer_data.scrollamount

}

// Adjust the clip region

dhtml_objects['viewer2'].resize_clip_by(top_resize,

right_resize,

bottom_resize,

left_resize)

// Set a new timeout

timeout_id = setTimeout("wipe_in()", viewer_data.scrolldelay)

}

else {

stop_it()

}

}

function write_controls() {

// Write the slide number

if (scrolling) {

slide_text = "Loading the next slide...<p>"

}

else {

slide_text = "Slide #" + eval(current_slide + 1) + "&#151;" + slides[current_slide].caption + "<p>"

}

if (current_slide == 0 || scrolling) {

previous_control = "Previous"

}

else {

previous_control = '<a href="javascript:previous_slide()">Previous</a>'

}

if (current_slide == slides.length - 1 || scrolling) {

next_control = "Next"

}

else {

next_control = '<a href="javascript:next_slide()">Next</a>'

}

dhtml_objects["controls"].set_html(slide_text + previous_control + "&nbsp;" + next_control)

}

//-->

</script>

</head>

<body onLoad="initialize()">

<!--IE needs to have the positioning inside the tag -->

<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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有