>  기사  >  웹 프론트엔드  >  HTML 요소 차단 플래시 예제에 대한 자세한 소개

HTML 요소 차단 플래시 예제에 대한 자세한 소개

高洛峰
高洛峰원래의
2017-03-06 16:03:361237검색

이 글에서는 주로 html 요소 차단 플래시의 자세한 예시를 소개하고 있습니다. 필요하신 분들은 참고하시면 됩니다.

코드는 다음과 같습니다.

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

시나리오 1(wmode 매개변수) 플래시는 수정 가능)
wmode 속성을 투명 또는 불투명으로 수정

DEMO는 다음과 같습니다.

코드는 다음과 같습니다.

<!doctype html>
<html>
<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>
<object 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>
Jununx,欢迎您!--transparent
</div>
</div></p> <p><!--opaque-->
<div>
<object 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>
Jununx,欢迎您!--opaque
</div>
</div></p> <p></body>
</html>

시나리오

DEMO는 다음과 같습니다.

코드는 다음과 같습니다.

<!doctype html>
<html>
<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>
<object 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>
<div>Jununx,欢迎您!--window</div>
<iframe 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-->
<p class="m-box">
    <iframe class="m-flash" src="ifr.html" frameborder="0"></iframe></p>
<p>    <p class="m-shadow">
        <p class="m-shadow-txt">Jununx,欢迎您!--window</p>
        <iframe class="m-shadow-ifr" frameborder="0"></iframe>
    </p>
</p></p>
<p></body>
</html>

iframe 페이지:


코드는 다음과 같습니다:

<!doctype html>
<html>
<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 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 frameborder="0"></iframe>
</body>
</html>

더 보기 HTML 요소 차단 플래시의 자세한 예, 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.