我在Web上找到了这个代码。 它工作正常，但只有一次。
另一次我触发eventListener时它不会缩放。 虽然出现了Zoombox，但那里没有swf。
这是HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="../scripts/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js"></script>
<script type="text/javascript" src="../scripts/fancyzoom.js"></script>
<script type="text/javascript">
document.onload = new FancyZoom('small');
</script>
</head>
<body>
<div><a href="#svo1" id="small"></a></div>
<div id="svo1">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="680" height="600">
<param name="movie" value="../flash/mega-svo.swf" /><!--value="../images/possible pics/flash/svo4.swf"-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="11.0.0.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="../../external_files/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="../flash/mega-svo.swf" width="680" height="600">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="11.0.0.0" />
<param name="expressinstall" value="../../external_files/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
这是我下载的fancyzoom.js
Object.extend(String.prototype, {
// if a string doesn't end with str it appends it
ensureEndsWith: function(str) {
return this.endsWith(str) ? this : this + str;
},
// makes sure that string ends with px (for setting widths and heights)
px: function() {
return this.ensureEndsWith('px');
}
});
Object.extend(Number.prototype, {
// makes sure that number ends with px (for setting widths and heights)
px: function() {
return this.toString().px();
}
});
var Window = {
// returns correct dimensions for window, had issues with prototype's sometimes. this was ganked from apple.
size: function() {
var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
var x = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
var y = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);
return {'width':width, 'height':height, 'x':x, 'y':y}
}
}
var FancyZoomBox = {
directory : '../images/fancyzoom',
zooming : false,
setup : false,
init: function(directory) {
if (FancyZoomBox.setup) return;
FancyZoomBox.setup = true;
var ie = navigator.userAgent.match(/MSIE\s(\d)+/);
if (ie) {
var version = parseInt(ie[1]);
Prototype.Browser['IE' + version.toString()] = true;
Prototype.Browser.ltIE7 = (version < 7) ? true : false;
}
var html = '<div id="zoom" style="display:none;"> \
<table id="zoom_table" style="border-collapse:collapse; width:100%; height:100%;"> \
<tbody> \
<tr> \
<td class="tl" style="background:url(' + FancyZoomBox.directory + '/tl.png) 0 0 no-repeat; width:20px; height:20px; overflow:hidden;" /> \
<td class="tm" style="background:url(' + FancyZoomBox.directory + '/tm.png) 0 0 repeat-x; height:20px; overflow:hidden;" /> \
<td class="tr" style="background:url(' + FancyZoomBox.directory + '/tr.png) 100% 0 no-repeat; width:20px; height:20px; overflow:hidden;" /> \
</tr> \
<tr> \
<td class="ml" style="background:url(' + FancyZoomBox.directory + '/ml.png) 0 0 repeat-y; width:20px; overflow:hidden;" /> \
<td class="mm" style="background:#fff; vertical-align:top; padding:10px;"> \
<div id="zoom_content"> \
</div> \
</td> \
<td class="mr" style="background:url(' + FancyZoomBox.directory + '/mr.png) 100% 0 repeat-y; width:20px; overflow:hidden;" /> \
</tr> \
<tr> \
<td class="bl" style="background:url(' + FancyZoomBox.directory + '/bl.png) 0 100% no-repeat; width:20px; height:20px; overflow:hidden;" /> \
<td class="bm" style="background:url(' + FancyZoomBox.directory + '/bm.png) 0 100% repeat-x; height:20px; overflow:hidden;" /> \
<td class="br" style="background:url(' + FancyZoomBox.directory + '/br.png) 100% 100% no-repeat; width:20px; height:20px; overflow:hidden;" /> \
</tr> \
</tbody> \
</table> \
<a href="#" title="Close" id="zoom_close" style="position:absolute; top:0; left:0;"> \
<img src="' + FancyZoomBox.directory + '/closebox.png" alt="Close" style="border:none; margin:0; padding:0;" /> \
</a> \
</div>';
var body = $$('body').first();
body.insert(html);
FancyZoomBox.zoom = $('zoom');
FancyZoomBox.zoom_table = $('zoom_table');
FancyZoomBox.zoom_close = $('zoom_close');
FancyZoomBox.zoom_content = $('zoom_content');
FancyZoomBox.zoom_close.observe('click', FancyZoomBox.hide);
FancyZoomBox.middle_row = $A([$$('td.ml'), $$('td.mm'), $$('td.mr')]).flatten();
FancyZoomBox.cells = FancyZoomBox.zoom_table.select('td');
// hide zoom if click fired is not inside zoom
$$('html').first().observe('click', function(e) {
var click_in_zoom = e.findElement('#zoom'),
zoom_display = FancyZoomBox.zoom.getStyle('display');
if (zoom_display == 'block' && !click_in_zoom) {
FancyZoomBox.hide(e);
}
});
// esc to close zoom box
$(document).observe('keyup', function(e) {
var zoom_display = FancyZoomBox.zoom.getStyle('display');
if (e.keyCode == Event.KEY_ESC && zoom_display == 'block') {
FancyZoomBox.hide(e);
}
});
// just use gifs as ie6 and below suck
if (Prototype.Browser.ltIE7) {
FancyZoomBox.switchBackgroundImagesTo('gif');
}
},
show: function(e) {
e.stop();
if (FancyZoomBox.zooming) return;
FancyZoomBox.zooming = true;
var element = e.findElement('a');
var related_div = element.content_div;
var width = (element.zoom_width || related_div.getWidth()) + 60;
var height = (element.zoom_height || related_div.getHeight()) + 60;
var d = Window.size();
var yOffset = document.viewport.getScrollOffsets()[1];
// ensure that newTop is at least 0 so it doesn't hide close button
var newTop = Math.max((d.height/2) - (height/2) + yOffset, 0);
var newLeft = (d.width/2) - (width/2);
FancyZoomBox.curTop = e.pointerY();
FancyZoomBox.curLeft = e.pointerX();
FancyZoomBox.moveX = -(FancyZoomBox.curLeft - newLeft);
FancyZoomBox.moveY = -(FancyZoomBox.curTop - newTop);
FancyZoomBox.zoom.hide().setStyle({
position : 'absolute',
top : FancyZoomBox.curTop.px(),
left : FancyZoomBox.curLeft.px()
});
new Effect.Parallel([
new Effect.Appear(FancyZoomBox.zoom, {sync:true}),
new Effect.Move(FancyZoomBox.zoom, {x: FancyZoomBox.moveX, y: FancyZoomBox.moveY, sync: true}),
new Effect.Morph(FancyZoomBox.zoom, {
style: {
width: width.px(),
height: height.px()
},
sync: true,
beforeStart: function(effect) {
// middle row height must be set for IE otherwise it tries to be "logical" with the height
if (Prototype.Browser.IE) {
FancyZoomBox.middle_row.invoke('setStyle', {height:(height-40).px()});
}
FancyZoomBox.fixBackgroundsForIE();
},
afterFinish: function(effect) {
var related_div_childElements = related_div.childElements();
for(var i=0; i<related_div_childElements.length; i++)
Element.insert(FancyZoomBox.zoom_content,related_div_childElements[i]);
FancyZoomBox.unfixBackgroundsForIE();
FancyZoomBox.zoom_close.show();
FancyZoomBox.zooming = false;
}
})
], { duration: 0.5 });
},
hide: function(e) {
e.stop();
if (FancyZoomBox.zooming) return;
FancyZoomBox.zooming = true;
new Effect.Parallel([
new Effect.Move(FancyZoomBox.zoom, {x: FancyZoomBox.moveX*-1, y: FancyZoomBox.moveY*-1, sync: true}),
new Effect.Morph(FancyZoomBox.zoom, {
style: {
width: '1'.px(),
height: '1'.px()
},
sync : true,
beforeStart: function(effect) {
FancyZoomBox.fixBackgroundsForIE();
FancyZoomBox.zoom_content.innerHTML = '';
FancyZoomBox.zoom_close.hide();
},
afterFinish: function(effect) {
FancyZoomBox.unfixBackgroundsForIE();
FancyZoomBox.zooming = false;
}
}),
new Effect.Fade(FancyZoomBox.zoom, {sync:true})
], { duration: 0.5 });
},
// switches the backgrounds of the cells and the close image to png's or gif's
// fixes ie's issues with fading and appearing transparent png's with
// no background and ie6's craptacular handling of transparent png's
switchBackgroundImagesTo: function(to) {
FancyZoomBox.cells.each(function(td) {
var bg = td.getStyle('background-image').gsub(/\.(png|gif|none)\)$/, '.' + to + ')');
td.setStyle('background-image: ' + bg);
});
var close_img = FancyZoomBox.zoom_close.firstDescendant();
var new_img = close_img.readAttribute('src').gsub(/\.(png|gif|none)$/, '.' + to);
close_img.writeAttribute('src', new_img);
},
// prevents the thick black border that happens when appearing or fading png in IE
fixBackgroundsForIE: function() {
if (Prototype.Browser.IE7) { FancyZoomBox.switchBackgroundImagesTo('gif'); }
},
// swaps back to png's for prettier shadows
unfixBackgroundsForIE: function() {
if (Prototype.Browser.IE7) { FancyZoomBox.switchBackgroundImagesTo('png'); }
}
}
var FancyZoom = Class.create({
initialize: function(element) {
this.options = arguments.length > 1 ? arguments[1] : {};
FancyZoomBox.init();
this.element = $(element);
if (this.element) {
this.element.content_div = $(this.element.readAttribute('href').gsub(/^#/, ''));
this.element.content_div.hide();
this.element.zoom_width = this.options.width;
this.element.zoom_height = this.options.height;
this.element.observe('click', FancyZoomBox.show);
}
}
});
我该如何解决这个问题？
答案 0 :(得分：0)
调用FancyZoomBox.hide(e);时FancyZoomBox.zoom_content.innerHTML = '';会删除swf文件。
所以我将FancyZoomBox.zoom_content.hide();代替FancyZoomBox.zoom_content.innerHTML = '';。
我还在FancyZoomBox.zoom_content.show()方法中添加了FancyZoomBox.show(e);。
现在一切正常。
这是更正后的代码。
Object.extend(String.prototype, {
// if a string doesn't end with str it appends it
ensureEndsWith: function(str) {
return this.endsWith(str) ? this : this + str;
},
// makes sure that string ends with px (for setting widths and heights)
px: function() {
return this.ensureEndsWith('px');
}
});
Object.extend(Number.prototype, {
// makes sure that number ends with px (for setting widths and heights)
px: function() {
return this.toString().px();
}
});
var Window = {
// returns correct dimensions for window, had issues with prototype's sometimes. this was ganked from apple.
size: function() {
var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
var x = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
var y = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);
return {'width':width, 'height':height, 'x':x, 'y':y}
}
}
var FancyZoomBox = {
directory : '../images/fancyzoom',
zooming : false,
setup : false,
init: function(directory) {
if (FancyZoomBox.setup) return;
FancyZoomBox.setup = true;
var ie = navigator.userAgent.match(/MSIE\s(\d)+/);
if (ie) {
var version = parseInt(ie[1]);
Prototype.Browser['IE' + version.toString()] = true;
Prototype.Browser.ltIE7 = (version < 7) ? true : false;
}
var html = '<div id="zoom" style="display:none; z-index:90;"> \
<table id="zoom_table" style="border-collapse:collapse; width:100%; height:100%;"> \
<tbody> \
<tr> \
<td class="tl" style="background:url(' + FancyZoomBox.directory + '/tl.png) 0 0 no-repeat; width:20px; height:20px; overflow:hidden;" /> \
<td class="tm" style="background:url(' + FancyZoomBox.directory + '/tm.png) 0 0 repeat-x; height:20px; overflow:hidden;" /> \
<td class="tr" style="background:url(' + FancyZoomBox.directory + '/tr.png) 100% 0 no-repeat; width:20px; height:20px; overflow:hidden;" /> \
</tr> \
<tr> \
<td class="ml" style="background:url(' + FancyZoomBox.directory + '/ml.png) 0 0 repeat-y; width:20px; overflow:hidden;" /> \
<td class="mm" style="background:#fff; vertical-align:top; padding:10px;"> \
<div id="zoom_content"> \
</div> \
</td> \
<td class="mr" style="background:url(' + FancyZoomBox.directory + '/mr.png) 100% 0 repeat-y; width:20px; overflow:hidden;" /> \
</tr> \
<tr> \
<td class="bl" style="background:url(' + FancyZoomBox.directory + '/bl.png) 0 100% no-repeat; width:20px; height:20px; overflow:hidden;" /> \
<td class="bm" style="background:url(' + FancyZoomBox.directory + '/bm.png) 0 100% repeat-x; height:20px; overflow:hidden;" /> \
<td class="br" style="background:url(' + FancyZoomBox.directory + '/br.png) 100% 100% no-repeat; width:20px; height:20px; overflow:hidden;" /> \
</tr> \
</tbody> \
</table> \
<a href="#" title="Close" id="zoom_close" style="position:absolute; top:0; right:0;"> \
<img src="' + FancyZoomBox.directory + '/closebox.png" alt="Close" style="border:none; margin:0; padding:0;" /> \
</a> \
</div>';
var body = $$('body').first();
body.insert(html);
FancyZoomBox.zoom = $('zoom');
FancyZoomBox.zoom_table = $('zoom_table');
FancyZoomBox.zoom_close = $('zoom_close');
FancyZoomBox.zoom_content = $('zoom_content');
FancyZoomBox.zoom_close.observe('click', FancyZoomBox.hide);
FancyZoomBox.middle_row = $A([$$('td.ml'), $$('td.mm'), $$('td.mr')]).flatten();
FancyZoomBox.cells = FancyZoomBox.zoom_table.select('td');
// hide zoom if click fired is not inside zoom
$$('html').first().observe('click', function(e) {
var click_in_zoom = e.findElement('#zoom'),
zoom_display = FancyZoomBox.zoom.getStyle('display');
if (zoom_display == 'block' && !click_in_zoom) {
FancyZoomBox.hide(e);
}
});
// esc to close zoom box
$(document).observe('keyup', function(e) {
var zoom_display = FancyZoomBox.zoom.getStyle('display');
if (e.keyCode == Event.KEY_ESC && zoom_display == 'block') {
FancyZoomBox.hide(e);
}
});
// just use gifs as ie6 and below suck
if (Prototype.Browser.ltIE7) {
FancyZoomBox.switchBackgroundImagesTo('gif');
}
},
show: function(e) {
e.stop();
if (FancyZoomBox.zooming) return;
FancyZoomBox.zooming = true;
var element = e.findElement('a');
var related_div = element.content_div;
var width = (element.zoom_width || related_div.getWidth()) + 60;
var height = (element.zoom_height || related_div.getHeight()) + 60;
var d = Window.size();
var yOffset = document.viewport.getScrollOffsets()[1];
// ensure that newTop is at least 0 so it doesn't hide close button
var newTop = Math.max((d.height/2) - (height/2) + yOffset, 0);
var newLeft = (d.width/2) - (width/2);
FancyZoomBox.curTop = e.pointerY();
FancyZoomBox.curLeft = e.pointerX();
FancyZoomBox.moveX = -(FancyZoomBox.curLeft - newLeft);
FancyZoomBox.moveY = -(FancyZoomBox.curTop - newTop);
FancyZoomBox.zoom.hide().setStyle({
position : 'absolute',
top : FancyZoomBox.curTop.px(),
left : FancyZoomBox.curLeft.px()
});
new Effect.Parallel([
new Effect.Appear(FancyZoomBox.zoom, {sync:true}),
new Effect.Move(FancyZoomBox.zoom, {x: FancyZoomBox.moveX, y: FancyZoomBox.moveY, sync: true}),
new Effect.Morph(FancyZoomBox.zoom, {
style: {
width: width.px(),
height: height.px()
},
sync: true,
beforeStart: function(effect) {
// middle row height must be set for IE otherwise it tries to be "logical" with the height
if (Prototype.Browser.IE) {
FancyZoomBox.middle_row.invoke('setStyle', {height:(height-40).px()});
}
FancyZoomBox.fixBackgroundsForIE();
},
afterFinish: function(effect) {
var related_div_childElements = related_div.childElements();
for(var i=0; i<related_div_childElements.length; i++)
Element.insert(FancyZoomBox.zoom_content,related_div_childElements[i]);
FancyZoomBox.unfixBackgroundsForIE();
FancyZoomBox.zoom_close.show();
FancyZoomBox.zooming = false;
FancyZoomBox.zoom_content.show()
}
})
], { duration: 0.5 });
},
hide: function(e) {
e.stop();
if (FancyZoomBox.zooming) return;
FancyZoomBox.zooming = true;
new Effect.Parallel([
new Effect.Move(FancyZoomBox.zoom, {x: FancyZoomBox.moveX*-1, y: FancyZoomBox.moveY*-1, sync: true}),
new Effect.Morph(FancyZoomBox.zoom, {
style: {
width: '1'.px(),
height: '1'.px()
},
sync : true,
beforeStart: function(effect) {
FancyZoomBox.fixBackgroundsForIE();
FancyZoomBox.zoom_content.hide();
FancyZoomBox.zoom_close.hide();
},
afterFinish: function(effect) {
FancyZoomBox.unfixBackgroundsForIE();
FancyZoomBox.zooming = false;
}
}),
new Effect.Fade(FancyZoomBox.zoom, {sync:true})
], { duration: 0.5 });
},
// switches the backgrounds of the cells and the close image to png's or gif's
// fixes ie's issues with fading and appearing transparent png's with
// no background and ie6's craptacular handling of transparent png's
switchBackgroundImagesTo: function(to) {
FancyZoomBox.cells.each(function(td) {
var bg = td.getStyle('background-image').gsub(/\.(png|gif|none)\)$/, '.' + to + ')');
td.setStyle('background-image: ' + bg);
});
var close_img = FancyZoomBox.zoom_close.firstDescendant();
var new_img = close_img.readAttribute('src').gsub(/\.(png|gif|none)$/, '.' + to);
close_img.writeAttribute('src', new_img);
},
// prevents the thick black border that happens when appearing or fading png in IE
fixBackgroundsForIE: function() {
if (Prototype.Browser.IE7) { FancyZoomBox.switchBackgroundImagesTo('gif'); }
},
// swaps back to png's for prettier shadows
unfixBackgroundsForIE: function() {
if (Prototype.Browser.IE7) { FancyZoomBox.switchBackgroundImagesTo('png'); }
}
}
var FancyZoom = Class.create({
initialize: function(element) {
this.options = arguments.length > 1 ? arguments[1] : {};
FancyZoomBox.init();
this.element = $(element);
if (this.element) {
this.element.content_div = $(this.element.readAttribute('href').gsub(/^#/, ''));
this.element.content_div.hide();
this.element.zoom_width = this.options.width;
this.element.zoom_height = this.options.height;
this.element.observe('click', FancyZoomBox.show);
}
}
});