您现在的位置: 365建站网 > 365学习 > Flash视频广告的定位兼容性问题

Flash视频广告的定位兼容性问题

文章来源:365jz.com     点击数:118    更新时间:2009-09-13 10:48   参与评论

 在项目中,用到了一个Flash视频广告,但是该视频广告在Firefox中显示实在是差强人意,居然漂浮在了网站的左上角,该怎么解决这个问题呢?


调用代码如下:
<!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>无标题文档</title>
<script language="JavaScript" type="text/javascript" src="flash.js"></script>
<style type="text/CSS">
body { height:1000px;width:100%}
.zhans_ship { width:250px; height:200px; Z-INDEX:99999; right: 0px; VISIBILITY: hidden; BORDER-BOTTOM: #000 2px solid; POSITION: absolute; BACKGROUND-COLOR: #000;top:378px;}
.top_ship { width:250px; height:26px; background-image:url(kkkk/msgTopBg.gif);font-family:"宋体"; font-size:12px; color:#FFFFFF;}
.top_ship div { width:150px; height:auto; float:left; line-height:20px;}
.bfq_a {font-size: 12px; background-image: url('kkkk/bomBg.gif');height:15px; line-height:15px; color: #ffffff;padding-top:2px; text-align:center;}
.bfq_a a:link { font-family:"宋体"; font-size:12px; text-decoration:none; color:#FFFFFF;}
.bfq_a a:visited { font-family:"宋体"; font-size:12px; text-decoration:none; color:#FFFFFF;}
.bfq_a a:active { font-family:"宋体"; font-size:12px; text-decoration:none; color:#FFFFFF;}
.bfq_a a:hover { font-family:"宋体"; font-size:12px; text-decoration:none; color:#FFFFFF;}
</style>
</head>

<body>
<div class="zhans_ship" id="eMeng">
 <div class="top_ship"><div>视频广告:</div><span title=关闭 style="CURSOR: hand;color:white;font-size:12px;font-weight:bold;margin-right:4px; float:right; width:auto; height:auto; margin-top:3px;" onclick=closeDiv() >×</span></div>
<!-- flash 显示部分 start --> 
<div class="mid_ship">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0 " width="250" height="150">
<param name="movie" value="player.swf">
<param name="quality" value="high">
<param name="allowFullScreen" value="true" />
<param name="FlashVars" value="vcastr_file=http://www.xxx.cn/zhaoshang.flv&vcastr_title=MiningGo&BarColor=0xFFffff&BarPosition=1&IsShowBar=3&BarTransparent=10&LogoText=Zgcjq.COM&IsAutoPlay=1&IsContinue=1" />
<embed src="player.swf" allowFullScreen="true" FlashVars="vcastr_file=http://www.xxx.com/images/zhaoshang.flv&vcastr_title=MiningGo&BarColor=0xFFffff&BarPosition=1&IsShowBar=3&BarTransparent=10&LogoText=Zgcjq.COM&IsAutoPlay=1&IsContinue=1" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer " wmode="transparent"  type="application/x-shockwave-flash" width="250" height="150"></embed>
</object>
 </div>
<!-- flash 显示部分 end --> 
 <div class="bfq_a"><a href="#" target="_blank">大型XX活动</a></div>
</div>
</body>
</html>

flash.js代码(修改后的)如下:


if(document.all){
  window.attachEvent('onload',getMsg);
}else{
  window.addEventListener('load',getMsg,false);
}
window.onresize = resizeDiv;
window.onerror = function(){}

var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0;

function getMsg()
{
  try{
    var eMeng = document.getElementById("eMeng");
    /* 为修改前
    var docWidth = document.documentElement.clientWidth;
    var docHeight = document.documentElement.clientHeight;
    */
    //修改后:
    var docWidth = getWidth();
    var docHeight = getHeight();

    divTop = parseInt(eMeng.style.top,10);
    divLeft = parseInt(eMeng.style.left,10);
    divHeight = parseInt(eMeng.offsetHeight,10);
    divWidth = parseInt(eMeng.offsetWidth,10);
    eMeng.style.top = parseInt(document.documentElement.scrollTop,10) + docHeight + 10+"px" ;// divHeight
    eMeng.style.left = parseInt(document.documentElement.scrollLeft,10) + docWidth - divWidth+"px" ;
    eMeng.style.visibility = "visible";
    objTimer = window.setInterval("moveDiv()",10)
  }catch(e){
   
  }
}

function resizeDiv()
{
  i+=1;
  try{
    var eMeng = document.getElementById("eMeng");
    var docWidth = getWidth();
    var docHeight = getHeight();  
    divHeight = parseInt(eMeng.offsetHeight,10)
    divWidth = parseInt(eMeng.offsetWidth,10)
    eMeng.style.top = docHeight - divHeight + parseInt(document.documentElement.scrollTop,10)+"px" ;
    eMeng.style.left = docWidth - divWidth + parseInt(document.documentElement.scrollLeft,10)+"px" ;
  }catch(e){}
}

function moveDiv()
{
  try
  {
    var eMeng = document.getElementById("eMeng");
    var docWidth = getWidth();
    var docHeight = getHeight();
    divHeight = parseInt(eMeng.offsetHeight,10);
    divWidth = parseInt(eMeng.offsetWidth,10);
    if(parseInt(eMeng.style.top,10) <= (docHeight - divHeight + parseInt(document.documentElement.scrollTop,10)))
    {
    window.clearInterval(objTimer);
    objTimer = window.setInterval("resizeDiv()",1);
    }
    divTop = parseInt(eMeng.style.top,10);
    divTop--;
    eMeng.style.top = divTop+"px" ;
  }catch(e){
  }

}
 
function closeDiv()
{
    var eMeng = document.getElementById("eMeng");
    eMeng.innerHTML='';
    eMeng.style.visibility='hidden';
    if(objTimer) window.clearInterval(objTimer);
}

/**
 * 获取屏幕宽度的函数,在非xhtml标准页面下有可能有问题
 */ 
function getWidth() 

 var winWidth = '';
  if (window.innerWidth)//for Firefox 
  { 
      winWidth = window.innerWidth; 
  } 
  else if((document.body) && (document.body.clientWidth)) 
  { 
      winWidth = document.body.clientWidth; 
  } 
  if (document.documentElement && document.documentElement.clientWidth) 
  { 
      winWidth = document.documentElement.clientWidth; 
  }  
  return winWidth;

 
/**
 * 获取屏幕高度的函数
 * html,body高度属性必须设值为height:100%否则在火狐浏览器下获取不到真实高度
 */ 
function getHeight() 
{
  var winHeight = '';
  if (window.innerHeight)//for Firefox 
  { 
      winHeight = window.innerHeight; 
  } 
  else if((document.body) && (document.body.clientHeight)) 
  { 
      winHeight = document.body.clientHeight; 
  } 

  if (document.documentElement  && document.documentElement.clientHeight) 
  { 
      winHeight = document.documentElement.clientHeight; 
  } 
  return winHeight; 


*:红色部分为修改的位置或添加的代码
修改部分:
1.增强型的获取窗口长度和宽度的函数;
2.在style.top,style.left等处在Firefox下必须使用单位px;
3.调整 Flash参数之wmodel,即window model,详情请自己搜索;


修改以上几处,就可以实现IE,Firefox的准确定位和相同的显示效果。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (118人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------