浮动广告代码实例

最新推荐文章于 2023-10-13 11:29:01 发布

Return_KB

最新推荐文章于 2023-10-13 11:29:01 发布

阅读量4.4k

点赞数 2

分类专栏：前端js

前端js 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

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

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

代码如下:

 
 
  
  
   
   [HTML] 
   
   纯文本查看 
   
   复制代码
   
   运行代码
  
  
  
  
   
   
    
     
        
          01 
         
        
          02 
         
        
          03 
         
        
          04 
         
        
          05 
         
        
          06 
         
        
          07 
         
        
          08 
         
        
          09 
         
        
          10 
         
        
          11 
         
        
          12 
         
        
          13 
         
        
          14 
         
        
          15 
         
        
          16 
         
        
          17 
         
        
          18 
         
        
          19 
         
        
          20 
         
        
          21 
         
        
          22 
         
        
          23 
         
        
          24 
         
        
          25 
         
        
          26 
         
        
          27 
         
        
          28 
         
        
          29 
         
        
          30 
         
        
          31 
         
        
          32 
         
        
          33 
         
        
          34 
         
        
          35 
         
        
          36 
         
        
          37 
         
        
          38 
         
        
          39 
         
         
          
          <!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.οnlοad=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.οnmοuseοver=function(){clearInterval(flag)} ，当鼠标放在div上，停止漂浮。

（18）.obj.οnmοuseοut=function(){flag=setInterval(float, delay)}，当鼠标离开，继续漂浮。