前端技术 手机教程
程序开发 平面动画
系统软件 CMS教程
CMS教程 在线手册
资源下载 网络安全
精准搜索请尝试:精确搜索

纯js网页浮动广告代码

2021-09-16 11:56:34 来源:原创 作者:寂静的神经

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

html代码

<div id="ad" style="position:absolute;z-index:9999">
  <a href="http://www.02405.com" 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>

20210916更新:新增在线预览及示例源文件下载

在线预览

示例源文件下载

本文关键词:javascript 网页 浮动广告

相关文章

零五网,分享IT知识,国内顶级IT知识门户网站。

Copyright (C) www.02405.com, All Rights Reserved.

零五网 版权所有 辽ICP备13002105号-1