JavaScript浮动广告代码实例

快乐打工仔 分类:实例代码

很多网站的页面都有漂浮的广告效果,虽然烦人,但也确实起到了良好的宣传效果。

各大代码网站也有关于漂浮代码的实例,很多存在着兼容性问题,不符合W3C标准,本站修复了兼容性问题,下面就简单介绍一下如何实现此效果。

代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<head>
<title>漂浮代码-前端教程网</title>
<script type="text/javascript"> 
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>
<body>
<div id="ad" style="position:absolute">
  <a href="#" target="_blank">
    <img src="mytest/JS/ad.jpg" border="0">
  </a>
</div>
</body>
</html>

图片可以在文档中随机的漂浮,下面就简单介绍一下如何实现此效果。

一.实现原理:

将div块采用绝对定位,里面包裹着图片,实际上是这个div块进行漂浮。然后通过定时器函数不断调用float来实现div的漂浮效果,此函数能够判断div块是否碰触边缘,然后再进行位置调整。

二.代码注释:

(1).window.onload=function(){},当文档完全加载完成再去执行函数中的代码。

(2).var x=50,y=60,声明两个变量x和y用来存放漂浮div的初始坐标。

(3). var xin=true, yin=true,设置两个标志。

(4).var step=1,设置div漂浮的幅度。

(5).var delay=10,用来设置定时器函数执行的时间间隔。

(6).var obj=document.getElementById("ad"),获取id属性值为ad的对象。

(7).function float(){},此函数规定了div块的漂浮原则。

(8).var L=T=0,声明两个变量并赋值为零,用来判断div块是否已经到达网页的左边缘和下边缘。

(9).ar R=document.documentElement.clientWidth-obj.offsetWidth,可见宽度减去div块的宽度,也就是剩余空间的宽度。

(10).var B=document.documentElement.clientHeight-obj.offsetHeight,可见高度减去div块的高度,也就是剩余空间的高度。

(11).obj.style.left=(x+document.body.scrollLeft||document.documentElement.scrollLeft)+"px",用来规定div的left属性值,之所以使用scrollleft是因为有可能网页的宽度过宽出现横向滚动条,之所以使用||是为了消除浏览器兼容性问题。

(12).obj.style.top=(y+document.body.scrollTop||document.documentElement.scrollTop)+"px",这个和上面同理,不过方位不一样。

(13).x=x+step*(xin?1:-1),计算x的值。

(14).if(x < L){ xin = true; x = L} ,如果div块到达网页的左边缘,如果是的话将xin的值设置为true,并且将x的值设置为L,即为零。

(15).if(x > R){ xin = false; x = R} ,如果div块到达网页的右边缘,则将xin的值色织为false,并将x的值的设置为r。

(16).var flag=setInterval(float,delay) ,使用定时器函数调用float()函数。

(17).obj.onmouseover=function(){clearInterval(flag)} ,当鼠标放在div上,停止漂浮。

(18).obj.onmouseout=function(){flag=setInterval(float, delay)},当鼠标离开,继续漂浮。

JavaScript浮动广告代码实例,这样的场景在实际项目中还是用的比较多的,关于JavaScript浮动广告代码实例就介绍到这了。

JavaScript浮动广告代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容