当前位置: 首页 > 文章教程  > 计算机与互联网 > 媒体动画

Flash动画默认总是会显示在网页页面的最顶层的原理分析

5/10/2018 8:18:23 PM 人评论

Webjx核心提示:flash浮动值其他元素之上原理。以前知道解决方法,但是不知道为什么会出现这种情况,就像css权重的问题似的,看过这本书才知道某些做法的缘由。 Flash 默认总是会显示在页面的最顶层,也就是说如果页面上存在一些DHTML Layer,那么这些层将会被Flash盖住。…

Webjx核心提示:flash浮动值其他元素之上原理。

以前知道解决方法,但是不知道为什么会出现这种情况,就像css权重的问题似的,看过这本书才知道某些做法的缘由。

Flash 默认总是会显示在页面的最顶层,也就是说如果页面上存在一些DHTML Layer,那么这些层将会被Flash盖住。即使设置了 z-index 属性也无济于事。如果你需要一些 LightBox 的弹出层,页面上的Flash可能会让其效果丑陋不堪。

Adobe 的技术知识库里提供了解决的办法: Flash content displays on top of all DHTML layers

<object> 标签增加wmode参数针对IE
<param name="wmode" value="transparent">


<embed> 标签也增加类似参数 针对FIREFOX
wmode="transparent"

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="756" height="200" accesskey="1" tabindex="2" title="sss">
<param name="movie" value="*.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed wmode="transparent" src="*.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="756" height="200"></embed>
</object>

【flash插入网页中,如果和其他元素有重叠,无论我们如何设置z-index,Flash都会浮动在其他元素之上。这是为什么呢?】

【1、其实与z-index无关,浏览器解析页面时,会先判断元素的类型,如果是窗口类型的,会优先于非窗口类型的元素,显示在页面最顶端,如果同属于非窗口类型的,才回去判断z-index的大小。

2、Flash嵌入网页中,有个wmode属性,用于指定窗口模式,其值有window窗口、opaque非窗口不透明、transparent非窗口透明三种。其中window表示Flash以窗口形式显示,opaque和transparent表示Flash以非窗口的形式显示,如果不显示这是wmode属性,默认的wmode的值为window。无论我们如何设置z-index也不会有效果。解决的办法就是这事wmode属性为opaque或transparent。因为Flash在ie和ff下是用不同的标签嵌入的(ie下一boject标签嵌入,ff下embed标签嵌入)所以我们需要对两种标签记性设置

如上面的例子或者下面的例子(哈哈其实就一个啦)

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="756" height="200" >
<param name="movie" value="*.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed wmode="transparent" src="*.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="756" height="200"></embed>
</object>

相关教程

  • Flash极佳的交互性和创造性25个国外优秀Flash网站

    Webjx核心提示:关于Flash网站,人们总是在讨论它的交互性与效率。Flash极佳的交互性和创造性的表现形式是很多人喜欢其的理由,但却又不得不关注Flash运行效率。这篇文章将向大家展示25个国外优秀的Flash网站。关于Flash网站,人们总是在讨论它的交互性与效率。Flash极佳…

    5/10/2018 8:18:32 PM
  • Flash实例教程:Flash广告动画制作

    Webjx核心提示:有些做了教程因为广告一直没出街也不便分享,即使飞机了也得等段时间发,这个做的快,投的也快,发上来就当给客户加广告了吧.有些做了教程因为广告一直没出街也不便分享,即使飞机了也得等段时间发,这个做的快,投的也快,发上来就当给客户加广告了吧上面…

    5/10/2018 8:18:29 PM
  • Flash是RIA技术:Flash真的适合做网站应用吗?

    Webjx核心提示:Flash真的适合做网站应用吗?原文链接:http://q.pnq.cc/archives/496 两年前,我们开发了一套基于Flash的文件(主要是图片)上传RIA应用,提供给阿里巴巴的用户使用。如果你使用过Wordpress或flickr上传图片,你应该已经用过类似的产品。这个程序基于YUI…

    5/10/2018 8:18:26 PM
  • Flash CS6中文版简单安装方法和激活方法

    Webjx核心提示:Flash CS6中文版简单安装方法和激活方法.Adobe 的更新速度真给力,CS5系列的软件才推出一年时间,CS6版本已经陆续放出了。本文与大家分享的是 Flash CS6 官方简体中文正式版下载。 Flash CS6 是用于动画制作和多媒体创作以及交互式设计网站的强大的顶级创…

    5/10/2018 8:18:23 PM

共有条评论 网友评论

验证码: 看不清楚?