这个博客已经过去了很久……

不过,你可以通过以下方式找到我

现在的位置: 首页 > 谈前端 > Flash > 正文
html中设置flash文件的URL跳转(DIV+CSS实现)以及wmode属性扫盲
2013年05月30日 Flash ⁄ 共 2968字 评论数 1

点击flash跳转一般有俩种方式实现

1、修改swf(准确说是fla源文件)文件:给整个场景加上button或者是层,或者是要设置跳转的关键帧来设置一个动作(Actionscript 语言)。这边贴个源码直接略过,引出第二个方法吧:

  1. on (release) {   
  2. getURL("http://www.highsea90.com""_blank");   
  3. }   

2、在html设置div:被这个看似简单的方式纠结了一个下午。

想法:设置俩个div,第一个放置flash,第二个放置URL(或者直接用 a 标签,将 a 转换成block)。用position的absolute定位,设置下z-index就行了嘛,想想很简单嘛~

结果测试时候在IE浏览器中竟然没法点击URL:flash的z-index属性在 a 的上层(太伤感情了,chrome当然一如既往的顺利)。

原因是IE在默认情况下flash是置于所有元素的最顶层,所以z-index的值没起作用,于是想到了opacity属性,一般来说某个元素有opacity属性的话其z-index默认是在其他元素之上的。果然opacity很NB,把flash压到身下了……

但是,问题还没有结束,在淘宝浏览器、搜狗浏览器等以“最快”的浏览器著称的“双核”平台上,当切换到“急速模式”(webkit内核)时候,又出现了相同的情况。心里开始抱怨了:你们这些靠山寨IE、chrome起家的,只能骗骗小女生的垃圾玩意儿,市场占有率一直没到IE的零头的东西竟然还有脸说自己是“最快的”“双核的”浏览器……

抱怨归抱怨,作为前端开发攻城师,总得想尽一切办法、用尽一切手段兼容所有浏览器吧~(当然 小站现在在IE6、7下还是会有“错位”的问题,呼呼~)

好吧,不罗嗦了,贴一下解决方案,以备今后查询吧。原因是引用flash时候 flash自身的 wmode属性没有设置为:transparent 。

wmode属性扫盲: 等下,还是先把最终代码贴出来吧:

  1. <!DOCTYPE html>  
  2. <head>  
  3.     <meta charset="utf-8"/>  
  4.     <title>flash300x250gh</title>  
  5. <style>  
  6. *{margin: 0;border: 0;padding: 0;background#fff;}  
  7. a{displayblock;width:300px;height:250px;positionabsolute;top: 0;left: 0;z-index: 999;background#fff;opacity:0.01;filter:alpha(opacity=1);}  
  8. .wrap,.flash{width300px;height250px;overflowhidden;positionrelative;}  
  9. </style>  
  10. </head>  
  11. <body>  
  12.   <div class="wrap">  
  13.     <div class="flash">  
  14. <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="250">  
  15.   <param name="movie" value="http://img02.taobaocdn.com/tps/i2/T1i8KHXxRhXXXtxVjX.swf" />  
  16.   <param name="quality" value="high" />  
  17.   <param name="wmode" value="transparent" />  
  18.   <param name="swfversion" value="6.0.65.0" />  
  19.   <object type="application/x-shockwave-flash" data="http://img02.taobaocdn.com/tps/i2/T1i8KHXxRhXXXtxVjX.swf" width="300" height="250" wmode="transparent">  
  20.   </object>  
  21. </object>   
  22.    </div>  
  23.    <a href="http://www.taobao.com" title="" target="_blank"></a>  
  24.   </div>  
  25. </body>  
  26. </html>  

wmode属性扫盲:引用自 Macromedia 官方

  • Window: Use the Window value to play a Flash Player movie in its own rectangular window on a web page. This is the default value for wmode and it works the way the classic Flash Player works. This normally provides the fastest animation performance.
  • Opaque: By using the Opaque value you can use JavaScript to move or resize movies that don’t need a transparent background. Opaque mode makes the movie hide everything behind it on the page. Additionally, opaque mode moves elements behind Flash movies (for example, with dynamic HTML) to prevent them from showing through.
  • Transparent: Transparent mode allows the background of the HTML page, or the DHTML layer underneath the Flash movie or layer, to show through all the transparent portions of the movie. This allows you to overlap the movie with other elements of the HTML page. Animation performance might be slower when you use this value.

一言以蔽之就是:

windows模式时候flash的z-index最牛永远在其他DOM结构之上。

Opaque模式时候默认在其他DOM之上,但是允许你自行设置z-index值

Transparent 模式时候,flash背景色alpha值将为0,并且只会绘制stage上真实可见的对象,同样你也可以使用z-index来控制flash影片的深度值,但是与Opaque模式不同的是这样做会降低flash影片的回放效果,而且在9.0.115之前的flash player版本设置这个值后会导致全屏失效,现在的版本已经不会有这个情况了。

呼呼,flash的如果早些了解就不会这么浪费时间了~

更详细的flash参数资料请移步这里

flash的wmode属性和html中flash的url设置

友荐云推荐
×