相容所有瀏覽器的對聯廣告程式碼

antzone發表於2017-03-15
瀏覽器

漂浮的對聯廣告應用非常廣泛，但是無奈很多類似的程式碼都有一定的瀏覽器相容性問題，這是因為之前程式碼主要針對低版本的IE瀏覽器，下面是一段能夠相容所有瀏覽器的程式碼例項。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>相容所有瀏覽器對聯廣告-螞蟻部落</title>
<style type="text/css">
#lovexin12, #lovexin14 
{
  width:120px;
  height:250px;
  background-color:#e5e5e5;
  border:1px solid #ddd;
}
html, body{height:1000px;}
#mm{height:1000px;}
</style>
<script type="text/javascript">
lastScrollY=0;
function heartBeat()
{ 
  var diffY;
  if(document.documentElement  &&  document.documentElement.scrollTop)
  {
    diffY = document.documentElement.scrollTop;
  } 
  else if(document.body)
  {
    diffY=document.body.scrollTop
  } 
  percent=.1*(diffY-lastScrollY); 
  if(percent>0)
  {
    percent=Math.ceil(percent);
  } 
  else
  {
    percent=Math.floor(percent);
  } 
  document.getElementById("lovexin12").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";
  document.getElementById("lovexin14").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";
  lastScrollY=lastScrollY+percent; 
}
suspendcode12="<DIV id=\"lovexin12\" style='left:2px;POSITION:absolute;TOP:120px;'>ad1</div>"
document.write(suspendcode12); 
window.setInterval("heartBeat()",1);
</script>
</head>
<body>
<div id="mm"> </div>
<div id="lovexin14" style="right:2px; position:absolute">
  <table width="100%" border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
  </table>
</div>
</body>
</html>

以上程式碼實現了我們想要的功能，對聯廣告可以跟隨滾動條漂浮。

相關文章