分享你我的心得.
共乘一片美好网络.
        找回密码
当前位置：小叶白龙博客 > 技术文章 > 正文

漂浮广告代码

2008-11-05 分类：技术文章 阅读(1182) 评论(757)

漂浮广告代码,同一页面支持多个实例,兼容IE\Firefox,支持W3C XHTML标准

下面来看 wpgcn 的支持多个漂浮广告调用方法：
将广告内容放在容器标签中如div，设置一个id，然后用下面方法调用
 

view plaincopy to clipboardprint?
  1. <script type="text/javascript" language="javascript">   
  2. var ad=new AdMove("IDName");   
  3. ad.Run();   
  4. </script>  

也可以用下面方法，在页面加载完成时调用，就不用考虑位置了
 

view plaincopy to clipboardprint?
  1. <script type="text/javascript" language="javascript">   
  2. addEvent(window,"load",initad);   
  3. function initad(){   
  4. var ad=new AdMove("div的id");   
  5. ad.Run();   
  6. }   
  7. </script>  

还有两个方法一般情况下没什么用，有兴趣的可以试试，功能是设置漂浮的起始坐标和方向的，如果省掉的话是随机位置随机方向
ad.SetLocation(x,y)
ad.SetDirection(dirx,diry)
SetDirection 方法挺有意思的，如果某个参数为0则只会横走或竖走了，如果都为0，那么就。。。不动了。

漂浮广告的斜率是每次碰壁后随机改变的，这样就决不可能出现多个广告，起始位置和方向一致导致其中一个总是被挡住，虽然几率很小

以下是多个漂浮广告代码实例，点击 view plain 查看运行效果：

view plaincopy to clipboardprint?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
  5. <title>多个漂浮广告代码,兼容IE、Firefox,支持W3C XHTML标准</title>   
  6. <script type="text/javascript" language="javascript">   
  7. <!–   
  8. //公共脚本文件 main.js   
  9. function addEvent(obj,evtType,func,cap){   
  10.     cap=cap||false;   
  11.     if(obj.addEventListener){   
  12.         obj.addEventListener(evtType,func,cap);   
  13.         return true;   
  14.     }else if(obj.attachEvent){   
  15.         if(cap){   
  16.             obj.setCapture();   
  17.             return true;   
  18.         }else{   
  19.             return obj.attachEvent("on" + evtType,func);   
  20.         }   
  21.     }else{   
  22.         return false;   
  23.     }   
  24. }   
  25. function getPageScroll(){   
  26.     var xScroll,yScroll;   
  27.     if (self.pageXOffset) {   
  28.         xScroll = self.pageXOffset;   
  29.     } else if (document.documentElement && document.documentElement.scrollLeft){   
  30.         xScroll = document.documentElement.scrollLeft;   
  31.     } else if (document.body) {   
  32.         xScroll = document.body.scrollLeft;   
  33.     }   
  34.     if (self.pageYOffset) {   
  35.         yScroll = self.pageYOffset;   
  36.     } else if (document.documentElement && document.documentElement.scrollTop){   
  37.         yScroll = document.documentElement.scrollTop;   
  38.     } else if (document.body) {   
  39.         yScroll = document.body.scrollTop;   
  40.     }   
  41.     arrayPageScroll = new Array(xScroll,yScroll);   
  42.     return arrayPageScroll;   
  43. }   
  44. function GetPageSize(){   
  45.     var xScroll, yScroll;   
  46.     if (window.innerHeight && window.scrollMaxY) {       
  47.         xScroll = document.body.scrollWidth;   
  48.         yScroll = window.innerHeight + window.scrollMaxY;   
  49.     } else if (document.body.scrollHeight > document.body.offsetHeight){   
  50.         xScroll = document.body.scrollWidth;   
  51.         yScroll = document.body.scrollHeight;   
  52.     } else {   
  53.         xScroll = document.body.offsetWidth;   
  54.         yScroll = document.body.offsetHeight;   
  55.     }   
  56.     var windowWidth, windowHeight;   
  57.     if (self.innerHeight) {   
  58.         windowWidth = self.innerWidth;   
  59.         windowHeight = self.innerHeight;   
  60.     } else if (document.documentElement && document.documentElement.clientHeight) {   
  61.         windowWidth = document.documentElement.clientWidth;   
  62.         windowHeight = document.documentElement.clientHeight;   
  63.     } else if (document.body) {   
  64.         windowWidth = document.body.clientWidth;   
  65.         windowHeight = document.body.clientHeight;   
  66.     }       
  67.     if(yScroll < windowHeight){   
  68.         pageHeight = windowHeight;   
  69.     } else {    
  70.         pageHeight = yScroll;   
  71.     }   
  72.     if(xScroll < windowWidth){       
  73.         pageWidth = windowWidth;   
  74.     } else {   
  75.         pageWidth = xScroll;   
  76.     }   
  77.     arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)    
  78.     return arrayPageSize;   
  79. }   
  80. //广告脚本文件 AdMove.js   
  81. /*  
  82. 例子  
  83. <div id="Div2">  
  84.     ***** content ******  
  85. </div>  
  86. var ad=new AdMove("Div2");  
  87. ad.Run();  
  88. */  
  89. ////////////////////////////////////////////////////////   
  90. var AdMoveConfig=new Object();   
  91. AdMoveConfig.IsInitialized=false;   
  92. AdMoveConfig.ScrollX=0;   
  93. AdMoveConfig.ScrollY=0;   
  94. AdMoveConfig.MoveWidth=0;   
  95. AdMoveConfig.MoveHeight=0;   
  96. AdMoveConfig.Resize=function(){   
  97.     var winsize=GetPageSize();   
  98.     AdMoveConfig.MoveWidth=winsize[2];   
  99.     AdMoveConfig.MoveHeight=winsize[3];   
  100.     AdMoveConfig.Scroll();   
  101. }   
  102. AdMoveConfig.Scroll=function(){   
  103.     var winscroll=getPageScroll();   
  104.     AdMoveConfig.ScrollX=winscroll[0];   
  105.     AdMoveConfig.ScrollY=winscroll[1];   
  106. }   
  107. addEvent(window,"resize",AdMoveConfig.Resize);   
  108. addEvent(window,"scroll",AdMoveConfig.Scroll);   
  109. function AdMove(id){   
  110.     if(!AdMoveConfig.IsInitialized){   
  111.         AdMoveConfig.Resize();   
  112.         AdMoveConfig.IsInitialized=true;   
  113.     }   
  114.     var obj=document.getElementById(id);   
  115.     obj.style.position="absolute";   
  116.     var W=AdMoveConfig.MoveWidth-obj.offsetWidth;   
  117.     var H=AdMoveConfig.MoveHeight-obj.offsetHeight;   
  118.     var x = W*Math.random(),y = H*Math.random();   
  119.     var rad=(Math.random()+1)*Math.PI/6;   
  120.     var kx=Math.sin(rad),ky=Math.cos(rad);   
  121.     var dirx = (Math.random()<0.5?1:-1), diry = (Math.random()<0.5?1:-1);   
  122.     var step = 1;   
  123.     var interval;   
  124.     this.SetLocation=function(vx,vy){x=vx;y=vy;}   
  125.     this.SetDirection=function(vx,vy){dirx=vx;diry=vy;}   
  126.     obj.CustomMethod=function(){   
  127.         obj.style.left = (x + AdMoveConfig.ScrollX) + "px";   
  128.         obj.style.top = (y + AdMoveConfig.ScrollY) + "px";   
  129.         rad=(Math.random()+1)*Math.PI/6;   
  130.         W=AdMoveConfig.MoveWidth-obj.offsetWidth;   
  131.         H=AdMoveConfig.MoveHeight-obj.offsetHeight;   
  132.         x = x + step*kx*dirx;   
  133.         if (x < 0){dirx = 1;x = 0;kx=Math.sin(rad);ky=Math.cos(rad);}    
  134.         if (x > W){dirx = -1;x = W;kx=Math.sin(rad);ky=Math.cos(rad);}   
  135.         y = y + step*ky*diry;   
  136.         if (y < 0){diry = 1;y = 0;kx=Math.sin(rad);ky=Math.cos(rad);}    
  137.         if (y > H){diry = -1;y = H;kx=Math.sin(rad);ky=Math.cos(rad);}   
  138.     }   
  139.     this.Run=function(){   
  140.         var delay = 25;//移动速度   
  141.         interval=setInterval(obj.CustomMethod,delay);   
  142.         obj.onmouseover=function(){clearInterval(interval);}   
  143.         obj.onmouseout=function(){interval=setInterval(obj.CustomMethod, delay);}   
  144.     }   
  145. }   
  146. //–>   
  147. </script>   
  148. </head>   
  149.   
  150. <body>   
  151. 本实例由布落格(Abo Blog)整理，引用请注明出自<a href="/UploadFiles/200811/20081105eogsi5.gif" alt="Baidu Logo" width="270" height="129" border="0" /></a></span>   
  152. <span id="ad2"><a href="/UploadFiles/200811/20081105uwfr4b.gif" alt="Google Logo" width="176" height="77" border="0" /></a></span>   
  153. <script type="text/javascript">   
  154. <!–   
  155. var ad1=new AdMove("ad1");   
  156. ad1.Run();   
  157. var ad2=new AdMove("ad2");   
  158. ad2.Run();   
  159. ad2.SetLocation(50,100)   
  160. ad2.SetDirection(1,1)   
  161. //–>   
  162. </script>   
  163. </body>   
  164. </html>  

随手把 Rimifon 的图片漂浮广告源代码也贴一下：

view plaincopy to clipboardprint?
  1. <html>   
  2. <head>   
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">   
  4. <title>Rimifon 多实例漂浮广告源代码</title>   
  5. <script language="javascript" type="text/javascript">   
  6. var Rimifon = {   
  7.     "Ads" : new Object,   
  8.     "NewFloatAd" : function(imgUrl, strLink)   
  9.     {   
  10.         var ad = document.createElement("a");   
  11.         ad.DirV = true;   
  12.         ad.DirH = true;   
  13.         ad.AutoMove = true;   
  14.         ad.Image = new Image;   
  15.         ad.Seed = Math.random();   
  16.         ad.Timer = setInterval("Rimifon.Float(" + ad.Seed + ")", 50);   
  17.         this.Ads[ad.Seed] = ad;   
  18.         ad.Image.Parent = ad;   
  19.         ad.style.position = "absolute";   
  20.         ad.style.left = 0;   
  21.         ad.style.top = 0;   
  22.         ad.Image.src = imgUrl;   
  23.         ad.Image.onmouseover = function(){this.Parent.AutoMove = false;}   
  24.         ad.Image.onmouseout = function(){this.Parent.AutoMove = true;}   
  25.         if(strLink)   
  26.         {   
  27.             ad.href = strLink;   
  28.             ad.Image.border = 0;   
  29.             ad.target = "_blank";   
  30.         }   
  31.         ad.appendChild(ad.Image);   
  32.         document.body.appendChild(ad);   
  33.         return ad;   
  34.     },   
  35.     "Float" : function(floatId)   
  36.     {   
  37.         var ad = this.Ads[floatId];   
  38.         if(ad.AutoMove)   
  39.         {   
  40.             var curLeft = parseInt(ad.style.left);   
  41.             var curTop = parseInt(ad.style.top);   
  42.             if(ad.offsetWidth + curLeft > document.body.clientWidth + document.body.scrollLeft – 1)   
  43.             {   
  44.                 curLeft = document.body.scrollLeft + document.body.clientWidth – ad.offsetWidth;   
  45.                 ad.DirH = false;   
  46.             }   
  47.             if(ad.offsetHeight + curTop > document.body.clientHeight + document.body.scrollTop – 1)   
  48.             {   
  49.                 curTop = document.body.scrollTop + document.body.clientHeight – ad.offsetHeight;   
  50.                 ad.DirV = false;   
  51.             }   
  52.             if(curLeft < document.body.scrollLeft)   
  53.             {   
  54.                 curLeft = document.body.scrollLeft;   
  55.                 ad.DirH = true;   
  56.             }   
  57.             if(curTop < document.body.scrollTop)   
  58.             {   
  59.                 curTop = document.body.scrollTop;   
  60.                 ad.DirV = true;   
  61.             }   
  62.             ad.style.left = curLeft + (ad.DirH ? 1 : -1) + "px";   
  63.             ad.style.top = curTop + (ad.DirV ? 1 : -1) + "px";   
  64.         }   
  65.     }   
  66. }   
  67. </script>   
  68. </head>   
  69.   
  70. <body>   
  71. <div style="height:800px"></div>   
  72. <script language="javascript" type="text/javascript">   
  73. Rimifon.NewFloatAd("/UploadFiles/200811/200811051c0sv8.gif", "http://www.baidu.com/");   
  74. var ad = Rimifon.NewFloatAd("/UploadFiles/200811/200811051851nb.gif","http://www.google.com/");   
  75. ad.style.left = 400;   
  76. ad.style.top = 300;   
  77. ad.Image.width = 176;   
  78. ad.Image.height = 77;   
  79. </script>   
  80. </body>   
  81. </html>  
赞(0)
未经允许不得转载：小叶白龙博客 » 漂浮广告代码
分享到： 更多 (0)

相关推荐

评论 757

评论前必须登录！

 

近期文章

分类目录

热门标签

小程序 (31)php (26)asp (23)iis (19)sql (19)微信 (17)css (16)微信小程序 (16)JAVA (15)WordPress (13)js (12)win2008 (11)sql2008 (11)wd my cloud (11)nas (11)数据库 (10)esp8266 (10)服务器 (9)群晖 (9)Openmediavault (9)html (8)2003 (7)Ubuntu (6)chrome (6)Sybase (6)墨水屏 (6)函数 (5)jquery (5)时间 (5)win2012 r2 (5)

网站统计

  • 日志总数：1511
  • 标签总数：657
  • 页面总数：0
  • 分类总数：13
  • 链接总数：0
  • 用户总数：1318
  • 最后更新：2024-11-01
2008年 11月
一 二 三 四 五 六 日
 123
45678910
11121314151617
18192021222324
25262728293031

blog1024