网上一般的网页浮动广告代码都是基于 jquery 的,受 jiquery 版本及浏览器限制,非常容易出现不兼容的情况,本站分享一段纯 js 网页浮动广告代码,简单兼容。

html代码

<div id="ad" style="position:absolute;z-index:9999">
  <a href="https://www.codesou.cn" target="_blank">
    <img src="/images/welcome.jpg" border="0">
  </a>
</div>

javascript代码

<script>
window.onload=function(){
  var x=50,y=60;
  var xin=true, yin=true;
  var step=1;
  var delay=10;
  var obj=document.getElementById("ad");
  function float(){
    var L=T=0;
    var R=document.documentElement.clientWidth-obj.offsetWidth;
    var B =document.documentElement.clientHeight-obj.offsetHeight;
    obj.style.left=(x+document.body.scrollLeft||document.documentElement.scrollLeft)+"px";
    obj.style.top=(y+document.body.scrollTop||document.documentElement.scrollTop)+"px";
    x = x + step*(xin?1:-1);
    if(x < L){ xin = true; x = L}
    if(x > R){ xin = false; x = R}
    y=y + step*(yin?1:-1)
    if(y < T){ yin = true; y = T }
    if(y > B){ yin = false; y = B }
  }
  var flag= setInterval(float, delay)
  obj.onmouseover=function(){clearInterval(flag)}
  obj.onmouseout=function(){flag=setInterval(float, delay)}
}
</script>