• 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; }
    
            .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="http://www.w3school.com.cn/i/bookmark.swf">
            <param name="wmode" value="transparent"/>
            <embed wmode="transparent" src="http://www.w3school.com.cn/i/bookmark.swf"></embed>
        </object>
    
        <div class="m-shadow">
            Jununx,欢迎您!--transparent
        </div>
    </div>
    
    <!--opaque-->
    <div class="m-box">
        <object class="m-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
            <param name="src" value="http://www.w3school.com.cn/i/bookmark.swf">
            <param name="wmode" value="opaque"/>
            <embed wmode="opaque" src="http://www.w3school.com.cn/i/bookmark.swf"></embed>
        </object>
    
        <div class="m-shadow">
            Jununx,欢迎您!--opaque
        </div>
    </div>
    
    </body>
    </html>
    View Code

    情景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; }
    
            .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="http://www.w3school.com.cn/i/bookmark.swf">
            <param name="wmode" value="window"/>
            <embed wmode="window" src="http://www.w3school.com.cn/i/bookmark.swf"></embed>
        </object>
    
        <div class="m-shadow">
            <div class="m-shadow-txt">Jununx,欢迎您!--window</div>
            <iframe class="m-shadow-ifr" frameborder="0"></iframe>
        </div>
    </div>
    
    </body>
    </html>
    View Code

    情景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; }
    
            .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>
    
        <div class="m-shadow">
            <div class="m-shadow-txt">Jununx,欢迎您!--window</div>
            <iframe class="m-shadow-ifr" frameborder="0"></iframe>
        </div>
    </div>
    
    </body>
    </html>
    View Code

    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="http://www.w3school.com.cn/i/bookmark.swf">
        <param name="wmode" value="window"/>
        <embed wmode="window" src="http://www.w3school.com.cn/i/bookmark.swf"></embed>
    </object>
    
    <iframe class="ifr" frameborder="0"></iframe>
    </body>
    </html>
    View Code
  • 相关阅读:
    jenkins中通过Publish Over SSH将项目部署到远程机器上
    GitHub 开源的 MySQL 在线更改 Schema 工具【转】
    MySQL ProxySQL读写分离实践
    MySQL ProxySQL读写分离使用初探
    LVS+Keepalived实现DBProxy的高可用
    Redis Codis 部署安装
    CS 和 BS 的区别和优缺点(转)
    Linux的SOCKET编程详解(转)
    数据结构-深度遍历和广度遍历(转)
    社保相关
  • 原文地址:https://www.cnblogs.com/jununx/p/3659244.html
Copyright © 2020-2023  润新知