• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    html元素遮挡flash详解示例


    复制代码
    代码如下:

    wmode参数:
    transparent模式:可用z-index控制层级
    opaque模式:可用z-index控制层级
    window模式:flash层级在浏览器核心显示窗口之上,flash会盖住与他重合的html

    情景1(可修改flash的wmode参数)
    修改wmode属性为,transparent或opaque

    DEMO如下:
     

    复制代码
    代码如下:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title> HTML元素遮挡Flash - 情景1 </title>
    <style>
    html, body, object, embed{ padding: 0; margin: 0; }
    .m-box { position: relative; }</p> <p> .m-flash, .m-flash embed { width: 400px; }
    .m-shadow { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: #ccc; }
    </style>
    </head>
    <body>
    <!--transparent-->
    <div class="m-box">
    <object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
    <param name="src" value="<a href="http://www.aa.net/i/bookmark.swf">http://www.aa.net/i/bookmark.swf</a>">
    <param name="wmode" value="transparent"/>
    <embed wmode="transparent" src="<a href="http://www.aa.net/i/bookmark.swf"></embed">http://www.aa.net/i/bookmark.swf"></embed</a>>
    </object></p> <p> <div class="m-shadow">
    Jununx,欢迎您!--transparent
    </div>
    </div></p> <p><!--opaque-->
    <div class="m-box">
    <object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
    <param name="src" value="<a href="http://www.aa.net/i/bookmark.swf">http://www.aa.net/i/bookmark.swf</a>">
    <param name="wmode" value="opaque"/>
    <embed wmode="opaque" src="<a href="http://www.aa.net/i/bookmark.swf"></embed">http://www.aa.net/i/bookmark.swf"></embed</a>>
    </object></p> <p> <div class="m-shadow">
    Jununx,欢迎您!--opaque
    </div>
    </div></p> <p></body>
    </html>

    情景2(不可修改flash的wmode参数)-- flash和你的iframe遮挡层在同一个页面
    注:如果要兼容Safari、Opera,那么请直接告诉需求这个遮不了

    DEMO如下:
     

    复制代码
    代码如下:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title> HTML元素遮挡Flash - 情景2 </title>
    <style>
    html, body, object, embed{ padding: 0; margin: 0; }
    .m-box { position: relative; }</p> <p> .m-flash, .m-flash embed { width: 400px; }
    .m-flash { position: relative; z-index: 1; }
    .m-shadow { position: absolute; top: 0; left: 0; z-index: 2; width: 100px; height: 100px; background-color: #ccc; }
    .m-shadow-txt { position: absolute; z-index: 2; }
    .m-shadow-ifr { position: absolute; z-index: -1; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); }
    </style>
    </head>
    <body>
    <!--window-->
    <div class="m-box">
    <object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
    <param name="src" value="<a href="http://www.aa.net/i/bookmark.swf">http://www.aa.net/i/bookmark.swf</a>">
    <param name="wmode" value="window"/>
    <embed wmode="window" src="<a href="http://www.aa.net/i/bookmark.swf"></embed">http://www.aa.net/i/bookmark.swf"></embed</a>>
    </object></p> <p> <div class="m-shadow">
    <div class="m-shadow-txt">Jununx,欢迎您!--window</div>
    <iframe class="m-shadow-ifr" frameborder="0"></iframe>
    </div>
    </div></p> <p></body>
    </html>

    情景3(不可修改flash的wmode参数)-- flash是被一个iframe页面引入的
    注:如果木有权限操作iframe页面,那么请直接告诉需求这个遮不了注:如果要兼容Safari、Opera,那么请直接告诉需求这个遮不了

    DEMO页:
     

    复制代码
    代码如下:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title> HTML元素遮挡Flash - 情景2 </title>
    <style>
    html, body, object, embed{ padding: 0; margin: 0; }
    .m-box { position: relative; }</p> <p> .m-flash { position: relative; width: 400px; height: 400px; z-index: 1; }
    .m-shadow { position: absolute; top: 0; left: 0; z-index: 2; width: 100px; height: 100px; background-color: #ccc; }
    .m-shadow-txt { position: absolute; z-index: 2; }
    .m-shadow-ifr { position: absolute; z-index: -1; width: 100%; height: 100%; opacity: 0; filter: alpha(opacity=0); }
    </style>
    </head>
    <body>
    <!--window-->
    <div class="m-box">
    <iframe class="m-flash" src="ifr.html" frameborder="0"></iframe></p> <p> <div class="m-shadow">
    <div class="m-shadow-txt">Jununx,欢迎您!--window</div>
    <iframe class="m-shadow-ifr" frameborder="0"></iframe>
    </div>
    </div></p> <p></body>
    </html>

    iframe页:
     

    复制代码
    代码如下:

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title> HTML元素遮挡Flash - 情景3 </title>
    <style>
    html, body, object, embed{ padding: 0; margin: 0; }
    .ifr { position: absolute; z-index: 2; width: 100px; height: 100px; opacity: 0; filter: alpha(opacity=0); }
    .m-flash { position: absolute; z-index: 1; width: 400px; }
    </style>
    </head>
    <body>
    <!--window-->
    <object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
    <param name="src" value="<a href="http://www.aa.net/i/bookmark.swf">http://www.aa.net/i/bookmark.swf</a>">
    <param name="wmode" value="window"/>
    <embed wmode="window" src="<a href="http://www.aa.cn/i/bookmark.swf"></embed">http://www.aa.cn/i/bookmark.swf"></embed</a>>
    </object></p> <p><iframe class="ifr" frameborder="0"></iframe>
    </body>
    </html>

    上一篇:dom操作表格示例(dom创建表格)
    下一篇:html meta viewport属性说明
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    html元素遮挡flash详解示例 html,元素,遮挡,flash,详解,