callcall

[普通效果]

现在很多网站广告做的如火如荼，现在我就来介绍一下常见的对联浮动广告效果的代码使用方法，介绍的这种效果，在1024*768分辨率下正常显示，在800*600的分辨率下可以自动隐藏，以免遮住页面影响访问者浏览内容，下面就是实现效果所需代码：

1.     var delta=0.015
   
2.     var collection;
   
3.     function floaters() {
   
4.         this.items    = [];
   
5.         this.addItem    = function(id,x,y,content)
   
6.                   {
   
7.                     document.write('<DIV id='+id+' style="Z-INDEX: 0; POSITION: absolute;  width:80px; height:60px;left:'+(typeof(x)=='string'?eval(x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</DIV>');
   
8.                   
   
9.                     var newItem                = {};
   
10.                     newItem.object            = document.getElementById(id);
    
11.                     newItem.x                = x;
    
12.                     newItem.y                = y;
    
13. 
    
14.                     this.items[this.items.length]        = newItem;
    
15.                   }
    
16.         this.play    = function()
    
17.                   {
    
18.                     collection                = this.items
    
19.                     setInterval('play()',10);
    
20.                   }
    
21.         }
    
22.         function play()
    
23.         {
    
24.             if(screen.width<=800)
    
25.             {
    
26.                 for(var i=0;i<collection.length;i++)
    
27.                 {
    
28.                     collection[i].object.style.display    = 'none';
    
29.                 }
    
30.                 return;
    
31.             }
    
32.             for(var i=0;i<collection.length;i++)
    
33.             {
    
34.                 var followObj        = collection[i].object;
    
35.                 var followObj_x        = (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x);
    
36.                 var followObj_y        = (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);
    
37. 
    
38.                 if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x)) {
    
39.                     var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
    
40.                     dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
    
41.                     followObj.style.left=followObj.offsetLeft+dx;
    
42.                     }
    
43. 
    
44.                 if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) {
    
45.                     var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
    
46.                     dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
    
47.                     followObj.style.top=followObj.offsetTop+dy;
    
48.                     }
    
49.                 followObj.style.display    = '';
    
50.             }
    
51.         }   
    
52.       
    
53.     var theFloaters        = new floaters();
    
54.     theFloaters.addItem('followDiv1','document.body.clientWidth-100',0,'</a><br><a href=广告链接地址 target=_blank><img src=广告图片地址 width=100 height=400 border=0></a>');
    
55.     theFloaters.addItem('followDiv2',0,0,'<br><a href=广告链接地址 target=_blank><img src=广告图片地址 width=100 height=400 border=0></a>');
    
56.     theFloaters.play();  

复制代码

把上面的代码另存为一个JS文件，然后在想实现此效果的页面用 调用即可！注意修改广告图片地址和连接地址！

阻击者

纯技术
绝对是纯技术

callcall

[鼠标感应]

与前面一个代码不同的是，当鼠标移动到广告图片上是可以感应显示另外设置好的广告大图效果，下面就是实现效果所需代码：

1. function bigshow(){
   
2. document.all.div_250.style.visibility = 'visible';
   
3. document.all.div_80.style.visibility = 'hidden';
   
4. }
   
5. function bighide(){
   
6. document.all.div_80.style.visibility = 'visible';
   
7. document.all.div_250.style.visibility = 'hidden';
   
8. }
   
9. 
   
10. var ad_80= new Array(1);
    
11. var ad_250= new Array(1);
    
12. 
    
13. ad_80[0]="<a href=http://www.dfeng.net target=_blank><img src=/skin/adv43/ad/ad_ad.gif border=0></a>";
    
14. ad_250[0]="<a href=http://www.dfeng.net target=_blank><img src=/skin/adv43/ad/ad_ad2.gif border=0></a>";
    
15. 
    
16. var imgheight;
    
17. var fubioleft;
    
18. window.screen.width>800 ? fubioleft=15:fubioleft=15
    
19. 
    
20. document.write('<DIV id=floater_left style="Z-INDEX: 25; LEFT:'+fubioleft+'px; WIDTH: 28px;POSITION: absolute; TOP: 42px; HEIGHT: 22px">');
    
21. 
    
22. ad_now = new Date();
    
23. ad_id= ad_now.getSeconds() %1
    
24. 
    
25. 
    
26. 
    
27. var adhead1="<div id=div_80 style='position:absolute; width:95px; height:62px; z-index:12' onMouseOver=bigshow();>";
    
28. var adhead2="</div><div id=div_250 style='position:absolute;  visibility: hidden; z-index:13;width: 80; height: 60'  onMouseOut=bighide();>";
    
29. 
    
30. //var adhead1="<div id=div_80 style='position:absolute; width:95px; height:62px; z-index:20' onMouseOut='//MM_showHideLayers("div_250","","hide")' onMouseOver='MM_showHideLayers("div_250","","show")'>";
    
31. //var adhead2="</div><div id=div_250 style='position:absolute; z-index:21;visibility: hidden; width: 80; height: 60' onMouseOver='MM_showHideLayers("div_250","","show")' onMouseOut='MM_showHideLayers("div_250","","hide")'>";
    
32. 
    
33. document.write(adhead1+ad_80[ad_id]+adhead2+ad_250[ad_id]+"</div>");
    
34. 
    
35. 
    
36. 
    
37. document.write ("</div>");
    
38. self.onError=null;
    
39. currentX = currentY = 0;
    
40.      whichIt = null;         
    
41.      lastScrollX = 0; lastScrollY = 0;
    
42.      NS = (document.layers) ? 1 : 0;
    
43.      IE = (document.all) ? 1: 0;   
    
44.      function heartBeat() {
    
45.       if(IE) {
    
46.   diffY = document.body.scrollTop;
    
47.   diffX = document.body.scrollLeft; }
    
48.              if(NS) {
    
49.    diffY = self.pageYOffset; diffX = self.pageXOffset; }
    
50.       if(diffY != lastScrollY) {
    
51.                      percent = .5 * (diffY - lastScrollY);
    
52.                      if(percent > 0) percent = Math.ceil(percent);
    
53.                      else percent = Math.floor(percent);
    
54.          if(IE) document.all.floater_left.style.pixelTop += percent;
    
55.          if(NS) document.floater_left.top += percent;
    
56.                      lastScrollY = lastScrollY + percent;
    
57.          }
    
58.       if(diffX != lastScrollX) {
    
59.        percent = .5 * (diffX - lastScrollX);
    
60.        if(percent > 0) percent = Math.ceil(percent);
    
61.        else percent = Math.floor(percent);
    
62.        if(IE) document.all.floater_left.style.pixelLeft += percent;
    
63.        if(NS) document.floater_left.left += percent;
    
64.        lastScrollX = lastScrollX + percent;
    
65.       }
    
66.      }
    
67. 
    
68.      if(NS || IE) action = window.setInterval("heartBeat()",1);var ad_80= new Array(1);
    
69. var ad_250= new Array(1);
    
70. 
    
71. ad_80[0]="<a href=http://www.dfeng.net target=_blank><img src=/skin/adv43/ad/ad_ad.jpg border=0></a>";
    
72. ad_250[0]="<a href=http://www.dfeng.net target=_blank><img src=/skin/adv43/ad/ad_ad.jpg border=0></a>";
    
73. 
    
74. var imgheight;
    
75. var fubioleft;
    
76. window.screen.width>800 ? fubioleft=15:fubioleft=15
    
77. 
    
78. document.write('<DIV id=floater_right style="Z-INDEX: 25; LEFT:'+fubioleft+'px; WIDTH: 28px;POSITION: absolute; TOP: 42px; HEIGHT: 22px">');
    
79. 
    
80. ad_now = new Date();
    
81. ad_id= ad_now.getSeconds() %1
    
82. 
    
83. 
    
84. function myload()
    
85. {
    
86. if (navigator.appName == "Netscape")
    
87. {
    
88. document.div_right_80.pageX=+window.innerWidth-130;
    
89. document.div_right_250.pageX=+window.innerWidth-300;
    
90. mymove();
    
91. }
    
92. else
    
93. {
    
94. div_right_80.style.left=document.body.offsetWidth-130;
    
95. div_right_250.style.left=document.body.offsetWidth-300;
    
96. mymove();
    
97. }
    
98. }
    
99. 
    
100. function mymove()
     
101. {
     
102. if(document.ns)
     
103. {
     
104. document.div_right_80.left=pageXOffset+window.innerWidth-130;
     
105. document.div_right_250.left=pageXOffset+window.innerWidth-300;
     
106. setTimeout("mymove();",20)
     
107. }
     
108. else
     
109. {
     
110. div_right_80.style.left=document.body.scrollLeft+document.body.offsetWidth-145;
     
111. div_right_250.style.left=document.body.scrollLeft+document.body.offsetWidth-300;
     
112. setTimeout("mymove();",20)
     
113. }
     
114. }
     
115. 
     
116. 
     
117. 
     
118. var adhead1="<div id=div_right_80 style='position:absolute; width:95px; height:60px; z-index:12' onMouseOver=bigshow_right();>";
     
119. var adhead2="</div><div id=div_right_250  style='position:absolute;  visibility: hidden; z-index:13;width: 250; height: 250' onMouseOut=bighide_right();><div align=right>";
     
120. 
     
121. document.write(adhead1+ad_80[ad_id]+adhead2+ad_250[ad_id]+"</div></div>");
     
122. 
     
123. myload()
     
124. 
     
125. document.write ("</div>");
     
126. self.onError=null;
     
127. currentX_right = currentY_right = 0;
     
128.      whichIt_right = null;         
     
129.      lastScrollX_right = 0; lastScrollY_right = 0;
     
130.      NS = (document.layers) ? 1 : 0;
     
131.      IE = (document.all) ? 1: 0;   
     
132.      function heartBeat_right() {
     
133.       if(IE) {
     
134.   diffY_right = document.body.scrollTop;
     
135.   diffX_right = document.body.scrollLeft; }
     
136.              if(NS) {
     
137.    diffY_right = self.pageYOffset; diffX_right = self.pageXOffset; }
     
138.       if(diffY_right != lastScrollY_right) {
     
139.                      percent_right = .5 * (diffY_right - lastScrollY_right);
     
140.                      if(percent_right > 0) percent_right = Math.ceil(percent_right);
     
141.                      else percent_right = Math.floor(percent_right);
     
142.          if(IE) document.all.floater_right.style.pixelTop += percent_right;
     
143.          if(NS) document.floater_right.top += percent_right;
     
144.                      lastScrollY_right = lastScrollY_right + percent_right;
     
145.          }
     
146.       if(diffX_right != lastScrollX_right) {
     
147.        percent_right = .5 * (diffX_right - lastScrollX_right);
     
148.        if(percent_right > 0) percent_right = Math.ceil(percent_right);
     
149.        else percent_right = Math.floor(percent_right);
     
150.        if(IE) document.all.floater_right.style.pixelLeft += percent_right;
     
151.        if(NS) document.floater_right.left += percent_right;
     
152.        lastScrollX_right = lastScrollX_right + percent_right;
     
153.       }
     
154.      }
     
155. 
     
156.      if(NS || IE) action = window.setInterval("heartBeat_right()",1);
     
157. function bigshow_right(){
     
158. document.all.div_right_250.style.visibility = 'visible';
     
159. document.all.div_right_80.style.visibility = 'hidden';
     
160. }
     
161. function bighide_right(){
     
162. document.all.div_right_80.style.visibility = 'visible';
     
163. document.all.div_right_250.style.visibility = 'hidden';
     
164. }document.write('');
     
165. document.write('');
     
166. document.write('');

复制代码

把上面的代码另存为一个JS文件，然后在想实现此效果的页面用

1. <script type="text/javascript" language="javascript1.2" src="*.js"></SCRIPT>

复制代码

调用即可，*代表你另存的文件名！注意修改广告图片地址和连接地址！

fovs

喜欢，可能以后要用！

callcall

[允许关闭]

与前面两个代码不同的是，广告图下方增加了一个图片按纽，允许访客点击关闭广告图片，下面文本框中就是实现效果所需代码：

1. var delta=0.015;
   
2. var collection;
   
3. var closeB=false;
   
4. function floaters() {
   
5.   this.items = [];
   
6.   this.addItem = function(id,x,y,content)
   
7.       {
   
8.      document.write('<DIV id='+id+' style="Z-INDEX: 10; POSITION: absolute;  width:80px; height:60px;left:'+(typeof(x)=='string'?eval(x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</DIV>');
   
9.    
   
10.      var newItem    = {};
    
11.      newItem.object   = document.getElementById(id);
    
12.      newItem.x    = x;
    
13.      newItem.y    = y;
    
14. 
    
15.      this.items[this.items.length]  = newItem;
    
16.       }
    
17.   this.play = function()
    
18.       {
    
19.      collection    = this.items
    
20.      setInterval('play()',30);
    
21.       }
    
22.   }
    
23.   function play()
    
24.   {
    
25.    if(screen.width<=800 || closeB)
    
26.    {
    
27.     for(var i=0;i<collection.length;i++)
    
28.     {
    
29.      collection[i].object.style.display = 'none';
    
30.     }
    
31.     return;
    
32.    }
    
33.    for(var i=0;i<collection.length;i++)
    
34.    {
    
35.     var followObj  = collection[i].object;
    
36.     var followObj_x  = (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x);
    
37.     var followObj_y  = (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);
    
38. 
    
39.     if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x)) {
    
40.      var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
    
41.      dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
    
42.      followObj.style.left=followObj.offsetLeft+dx;
    
43.      }
    
44. 
    
45.     if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) {
    
46.      var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
    
47.      dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
    
48.      followObj.style.top=followObj.offsetTop+dy;
    
49.      }
    
50.     followObj.style.display = '';
    
51.    }
    
52.   }
    
53.   function closeBanner()
    
54.   {
    
55.    closeB=true;
    
56.    return;
    
57.   }
    
58. 
    
59. var theFloaters  = new floaters();
    
60. //
    
61. theFloaters.addItem('followDiv1','document.body.clientWidth-100',0,'<a onClick="closeBanner();" href=http://www.dfeng.net target=_blank><img src=ad/doublead/right.gif width=100 height=554 border=0></a><br><br><img src=ad/doublead/close.gif onClick="closeBanner();">');
    
62. theFloaters.addItem('followDiv2',0,0,'<a onClick="closeBanner();" href=http://www.dfeng.net target=_blank><img src=ad/doublead/ad_ad.gif width=100 height=400 border=0 ></a><br><br><img src=ad/doublead/close.gif onClick="closeBanner();">');
    
63. theFloaters.play();

复制代码

把上面的代码另存为一个JS文件，然后在想实现此效果的页面用 调用即可，*代表你另存的文件名！注意修改广告图片地址和连接地址！

aryou

收起来先．

sampras

非常感谢
请问如果只要一边的怎么弄
就是常见的在右边的随着上下滚动条移动的广告码
谢谢

callcall

浮动对联广告---之左侧代码

如果您想只有一侧显示的话,下面是实现左侧效果所需代码：

1. var ad_float_left_src ="图片地址";
   
2. var ad_float_left_url ="地址";
   
3. var ad_float_left_type = "";
   
4. document.ns = navigator.appName == "Microsoft Internet Explorer"
   
5. 
   
6. var imgheight_close
   
7. var imgleft
   
8. window.screen.width>800 ? imgheight_close=120:imgheight_close=120
   
9. window.screen.width>800 ? imgleft=8:imgleft=122
   
10. function myload()
    
11. {
    
12. myleft.style.top=document.body.scrollTop+document.body.offsetHeigh
    
13. t-imgheight_close;
    
14. myleft.style.left=imgleft;
    
15. leftmove();
    
16. }
    
17. function leftmove()
    
18. {
    
19. myleft.style.top=document.body.scrollTop+document.body.offsetHeigh
    
20. t-imgheight_close;
    
21. myleft.style.left=imgleft;
    
22. setTimeout("leftmove();",50)
    
23. }
    
24. 
    
25. function MM_reloadPage(init) {  //reloads the window if Nav4
    
26. resized
    
27.   if (init==true) with (navigator) {if ((appName=="Netscape")&&
    
28. (parseInt(appVersion)==4)) {
    
29.     document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
    
30. onresize=MM_reloadPage; }}
    
31.   else if (innerWidth!=document.MM_pgW || innerHeight!
    
32. =document.MM_pgH) location.reload();
    
33. }
    
34. MM_reloadPage(true)
    
35. 
    
36. function close_float_left(){
    
37. myleft.style.visibility='hidden';
    
38. }
    
39. 
    
40. document.write("<div id=myleft style='position:
    
41. absolute;width:80;top:300;left:5;visibility: visible;z-index: 1'>"
    
42. +"<style>"
    
43. +"A.closefloat:link,A.refloat:visited {text-
    
44. decoration:none;color:#000000;font-size:12px}"
    
45. +"A.closefloat:active,A.refloat:hover {text-decoration:underline;color:#0000FF;font-size:12px}"
    
46. +"</style>"
    
47. +"<table border=0 cellpadding=0 cellspacing=0><tr><td>");
    
48. 
    
49. if(document.ns){
    
50. if(ad_float_left_type!="swf")
    
51. document.write("<a href='" + ad_float_left_url + "' target
    
52. = '_blank'><img src='" + ad_float_left_src + "' WIDTH=88
    
53. height=31 border=0></a>");
    
54. else
    
55. document.write("<EMBED src='" + ad_float_left_src + "'
    
56. quality=high  WIDTH=80 HEIGHT=80 TYPE='application/x-shockwave-
    
57. flash' id=changhongout ></EMBED>");
    
58. 
    
59. document.write("</td></tr><tr><td width=80 height=20
    
60. align=right><a href='javascript:close_float_left();void(0);'
    
61. class=closefloat><b><font color=#ff0000>关闭</font></b></a></td></tr>"
    
62. +"</table>"
    
63. +"</div>");
    
64. 
    
65. myload()}

复制代码

    把上面的代码另存为一个*.JS文件，然后在想实现此效果的页面用

1. <script  src="*.js"></SCRIPT>

复制代码

调用即可，*代表你另存的文件名！注意修改广告图片地址和连接地址！相应的参数可以根据页面自行调整。

啸傲子

收藏了
应该精一下

孤独的刺

广告，广告~
站长的生命！