플래시 마스크를 실현하는 두 가지 방법

플래시 커버를 실현하는 데는 두 가지 방식이 있는데 첫 번째 방식은 iframe 방식이고 두 번째 방식은 플래시를 투명 모드로 설정하는 방식이다. 구체적인 실현 방식은 아래 코드를 본다.
iframe 모드 코드는 다음과 같습니다.


  
  
  
  
   
   
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
   
   
   
   <html xmlns="http://www.w3.org/1999/xhtml"> 
   
   
   
   <head> 
   
   
   
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
   
   
   
   <title>flash    </title> 
   
   
   
       <style> 
   
   
   
           *{margin:0;padding:0;} 
   
   
   
           body{background-color:#333;font:12px/1.5 tahoma;color:#CCC;padding-top:0!important;} 
   
   
   
           #doc{width:980px;height:720px;margin:auto;position:relative;} 
   
   
   
           #swf{width:980px;height:720px;overflow:hidden;position:relative;z-index:1;} 
   
   
   
           #myIframe{width:470px;height:498px;position:absolute;top:78px;left:391px;z-index:100;} 
   
   
   
       </style> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
       <div id="doc"> 
   
   
   
           <div id="swf"> 
   
   
   
               <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="980" height="720" id="bigswf"> 
   
   
   
                   <param name="movie" value="flash.swf" /> 
   
   
   
                   <param name="quality" value="high" /> 
   
   
   
                   <param name="allowScriptAccess" value="always" />    
   
   
   
                   <embed  src="flash.swf" width="980" height="720" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" id="bigswf"></embed> 
   
   
   
               </object> 
   
   
   
           </div> 
   
   
   
    
   
   
   
          <iframe id="myIframe" src="http://www.baidu.com" frameborder="0" scrolling="no"></iframe> 
   
   
   
       </div> 
   
   
   
   </body> 
   
   
   
   </html>

플래시 투명 모드 설정 코드는 다음과 같습니다.


  
  
  
  
   
   
   
   <!doctype html> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
       <meta charset="utf-8"> 
   
   
   
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
   
   
   
       <meta name="viewport" content="width=device-width"> 
   
   
   
       <title></title> 
   
   
   
       <meta name="description" content=""> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
       <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="200"> 
   
   
   
               <param name="movie" value="http://market.duowan.com/fodder/0912/124497660688.swf" /> 
   
   
   
               <param name="wmode" value="transparent" /> 
   
   
   
               <param name="quality" value="high" /> 
   
   
   
               <param name="menu" value="false" /> 
   
   
   
               <param name="swfversion" value="8.0.0" /> 
   
   
   
               <!--[if !IE]><!--> 
   
   
   
               <object type="application/x-shockwave-flash" data="http://market.duowan.com/fodder/0912/124497660688.swf" width="300" height="200"> 
   
   
   
                   <param name="wmode" value="transparent" /> 
   
   
   
               </object> 
   
   
   
               <!--<![endif]--> 
   
   
   
        </object> 
   
   
   
        <style> 
   
   
   
            #mask{ 
   
   
   
                width:200px; 
   
   
   
                height:100px; 
   
   
   
                //background-color:#FFF; 
   
   
   
                position:absolute; 
   
   
   
                top:0; 
   
   
   
                left:0; 
   
   
   
            } 
   
   
   
        </style> 
   
   
   
        <div id="mask"> 
   
   
   
           <a href="http://www.duowan.com">mask</a> 
   
   
   
        </div> 
   
   
   
   </body> 
   
   
   
   </html>

플래시 마스크를 실현하는 두 가지 방법

좋은 웹페이지 즐겨찾기