使用 Jquery 为 swf 文件交换图像
Posted
技术标签:
【中文标题】使用 Jquery 为 swf 文件交换图像【英文标题】：Swap an image for swf file using Jquery 【发布时间】：2011-09-23 04:23:41 【问题描述】：我有一些缩略图 + 页面上有一个相机图标和一个主图像，目前您单击缩略图，主图像淡出，缩略图淡入全尺寸版本。
现在，如果用户单击相机图标，整个图像应该会淡出，而 swf 视频应该会淡入，我该如何实现呢？
这是我用于图像的当前代码：
$('a.thumbnail').click(function() var src = $(this).attr('href'); if (src != $('img#full_image').attr('src').replace(/\?(.*)/,'')) $('img#full_image').stop().animate( 不透明度：'0' ， 功能（） $(this).attr('src', src+'?'+Math.floor(Math.random()*(10*100))); ).load(函数() $(this).stop().animate( 不透明度：'1' ); ); 返回假； );谢谢
【问题讨论】：
您可以创建一个空的 div，当单击较大的图像时，您可以将该 div 替换为 SWF（必要时隐藏图像）。可以吗？ 我想是的，您认为这样可以在 swf 中使用淡入/淡出吗？ 我不确定，但可能你可以淡入/淡出包含 swf 的 div。至于按需加载 SWF，请查看 swfobject library，它允许您根据浏览器（以及其他实用程序）将 div 替换为对象或嵌入标签。 刚刚检查：SWF 不能不透明（淡入/淡出更改不透明度）...我在包含 YouTube 视频的 div 上尝试过...除视频 (SWF) 外，div 内的所有内容都褪色. 所以我使用的代码已经贴在上面了！谢谢萨尔曼 【参考方案1】：是的，这是我正在使用的代码：
<script type="text/javascript" language="javascript" src="/jquery/jquery-1.5.1.js"></script>
<script type="text/javascript" language="javascript" src="/swfobject/jquery.swfobject.1-1-1.min.js"></script>
<table>
<tr>
<td>
<img id="full_image" src="1.jpg" border="0" />
<span id="flash" style="width:360px;height:360px;border:0px;margin:0px;padding:0px;">
<object data="fireworks.swf" type="application/x-shockwave-flash" id="flash_99458582" >
<param name="movie" value="fireworks.swf">
<param name="wmode" value="opaque">
</object>
</span>
</td>
<td>
<table>
<tr>
<td><a href="1.jpg" class="thumbnail"><img src="1.jpg" ></a></td>
</tr>
<tr>
<td><a href="2.jpg" class="thumbnail"><img src="2.jpg" ></a></td>
</tr>
<tr>
<td><img src="3.jpg" class="video"></td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function()
$("#flash").hide();
$('a.thumbnail').click(function()
$("#flash").hide();
$("img#full_image").show();
var src = $(this).attr('href');
if (src != $('img#full_image').attr('src').replace(/\?(.*)/,''))
$('img#full_image').attr('src', src+'?'+Math.floor(Math.random()*(10*100)));
return false;
);
$('img.video').click(function()
$("img#full_image").hide();
$("#flash").show();
);
return false;
);
</script>
这将使你们中的大多数人大致入门。您可能想要为大图像创建某种加载方式，或者预加载器。
此外，这段代码只是切换图像/swf，而不是fadeIn/fadeOut（因为闪存文件）。当我有时间时，我可能会考虑尝试通过覆盖白色图像（我使用的背景是白色的）并增加其不透明度等来创建效果。
谢谢
【讨论】：
嗨，我有一些代码，可以产生淡入/淡出的效果。一个 div 被加载并覆盖在 swf 之上并淡出。请看下面的代码。我已经在 Firefox 和 chrome 中对此进行了测试，并且效果很好。 IE惊喜惊喜是bug，加载时div会推送内容。我将创建一个新帖子来修复此错误。【参考方案2】：<html>
<head>
<script type="text/javascript" language="javascript" src="jquery/jquery-1.5.1.js"></script>
<script type="text/javascript" language="javascript" src="http://jquery.thewikies.com/swfobject/jquery.swfobject.1-1-1.min.js"></script>
<style>
div#test
background: #ffffff;
width: 360px;
height: 360px;
display: none;
z-index: 5;
position: fixed;
#mainimage
z-index: -1;
</style>
</head>
<body>
<table border="1">
<tr>
<td>
<div id="test"></div>
<div id="mainimage"><img id="full_image" src="1.jpg" border="0" /></div>
<span id="flash" style="width:360px;height:360px;border:0px;margin:0px;padding:0px;z-index:-1;">
<object data="fireworks.swf" type="application/x-shockwave-flash" id="flash_99458582" >
<param name="movie" value="fireworks.swf"><param name="wmode" value="opaque">
</object>
</span>
</td>
<td>
<table>
<tr>
<td><a href="1.jpg" class="thumbnail"><img src="1.jpg" ></a></td>
</tr>
<tr>
<td><a href="2.jpg" class="thumbnail"><img src="2.jpg" ></a></td>
</tr>
<tr>
<td><img src="3.jpg" class="video"></td>
</tr>
</table>
</td>
</tr>
</table>
<br /><br />
<script type="text/javascript">
$(document).ready(function ()
$("#flash").hide();
$('a.thumbnail').click(function ()
var src = $(this).attr('href');
$("#test").fadeIn("slow", function ()
//$("#test").fadeOut("slow");
$("#flash").hide();
$("#test").hide();
$("img#full_image").show();
$("img#full_image").css( opacity: 0 );
//alert(src);
if (src != $('img#full_image').attr('src').replace(/\?(.*)/, ''))
$('img#full_image').attr('src', src + '?' + Math.floor(Math.random() * (10 * 100)));
$('img#full_image').stop().animate( opacity: '1' , 'slow');
);
//alert("here");
return false;
);
$('img.video').click(function ()
$("img#full_image").fadeOut("slow", function ()
$("#test").show();
$("#flash").show();
$("img#full_image").hide();
$("#test").fadeOut("slow");
);
return false;
);
);
</script>
</body>
</html>
【讨论】：
以上是关于使用 Jquery 为 swf 文件交换图像的主要内容，如果未能解决你的问题，请参考以下文章