现在很多网站广告做的如火如荼,现在我就来介绍一下常见的对联浮动广告效果的代码使用方法,介绍的这种效果,在1024768分辨率下正常显示,在800600的分辨率下可以自动隐藏,以免遮住页面影响访问者浏览内容,下面就是实现效果所需代码:
var delta=0.015
var collection;
function floaters() {
this.items = [];
this.addItem = function(id,x,y,content)
{
document.write('
1<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>
');
var newItem = {};
newItem.object = document.getElementById(id);
newItem.x = x;
newItem.y = y;
this.items[this.items.length] = newItem;
}
this.play = function()
{
collection = this.items
setInterval('play()',10);
}
}
function play()
{
if(screen.width<=800)
{
for(var i=0;i
1<collection.length;i++) ;="" collection[i].object.style.display="none" dx="(dx" followobj="collection[i].object;" followobj_x="(typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x);" followobj_y="(typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);" for(var="" i="0;i<collection.length;i++)" if(followobj.offsetleft!="(document.body.scrollLeft+followObj_x))" return;="" var="" {="" }="">0?1:-1)*Math.ceil(Math.abs(dx));
2followObj.style.left=followObj.offsetLeft+dx;
3}
4if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) {
5var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
6dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
7followObj.style.top=followObj.offsetTop+dy;
8}
9followObj.style.display = '';
10}
11}
12
13var theFloaters = new floaters();
14theFloaters.addItem('followDiv1','document.body.clientWidth-100',0,'<br/><a href="广告链接地址" target="_blank"><img border="0" height="400" src="广告图片地址" width="100"/></a>');
15theFloaters.addItem('followDiv2',0,0,'<br/><a href="广告链接地址" target="_blank"><img border="0" height="400" src="广告图片地址" width="100"/></a>');
16theFloaters.play();
17
18
19把上面的代码另存为一个JS文件,然后在想实现此效果的页面用 调用即可!注意修改广告图片地址和连接地址!
20
21**鼠标感应**
22与前面一个代码不同的是,当鼠标移动到广告图片上是可以感应显示另外设置好的广告大图效果,下面就是实现效果所需代码:
23
24
25function bigshow(){
26document.all.div_250.style.visibility = 'visible';
27document.all.div_80.style.visibility = 'hidden';
28}
29function bighide(){
30document.all.div_80.style.visibility = 'visible';
31document.all.div_250.style.visibility = 'hidden';
32}
33var ad_80= new Array(1);
34var ad_250= new Array(1);
35ad_80[0]="<a href="http://www.dfeng.net" target="_blank"><img border="0" src="/skin/adv43/ad/ad_ad.gif"/></a>";
36ad_250[0]="<a href="http://www.dfeng.net" target="_blank"><img border="0" src="/skin/adv43/ad/ad_ad2.gif"/></a>";
37var imgheight;
38var fubioleft;
39window.screen.width>800 ? fubioleft=15:fubioleft=15
40document.write('<div id="floater_left" style="Z-INDEX: 25; LEFT:'+fubioleft+'px; WIDTH: 28px;POSITION: absolute; TOP: 42px; HEIGHT: 22px">');
41ad_now = new Date();
42ad_id= ad_now.getSeconds() %1
43
44var adhead1="<div id="div_80" onmouseover="bigshow();" style="position:absolute; width:95px; height:62px; z-index:12">";
45var adhead2="</div><div id="div_250" onmouseout="bighide();" style="position:absolute; visibility: hidden; z-index:13;width: 80; height: 60">";
46//var adhead1="<div id="div_80" onmouseout='//MM_showHideLayers(\"div_250\",\"\",\"hide\")' onmouseover='MM_showHideLayers(\"div_250\",\"\",\"show\")' style="position:absolute; width:95px; height:62px; z-index:20">";
47//var adhead2="</div><div id="div_250" onmouseout='MM_showHideLayers(\"div_250\",\"\",\"hide\")' onmouseover='MM_showHideLayers(\"div_250\",\"\",\"show\")' style="position:absolute; z-index:21;visibility: hidden; width: 80; height: 60">";
48document.write(adhead1+ad_80[ad_id]+adhead2+ad_250[ad_id]+"</div>");
49
50document.write ("</div>");
51self.onError=null;
52currentX = currentY = 0;
53whichIt = null;
54lastScrollX = 0; lastScrollY = 0;
55NS = (document.layers) ? 1 : 0;
56IE = (document.all) ? 1: 0;
57function heartBeat() {
58if(IE) {
59diffY = document.body.scrollTop;
60diffX = document.body.scrollLeft; }
61if(NS) {
62diffY = self.pageYOffset; diffX = self.pageXOffset; }
63if(diffY != lastScrollY) {
64percent = .5 * (diffY - lastScrollY);
65if(percent > 0) percent = Math.ceil(percent);
66else percent = Math.floor(percent);
67if(IE) document.all.floater_left.style.pixelTop += percent;
68if(NS) document.floater_left.top += percent;
69lastScrollY = lastScrollY + percent;
70}
71if(diffX != lastScrollX) {
72percent = .5 * (diffX - lastScrollX);
73if(percent > 0) percent = Math.ceil(percent);
74else percent = Math.floor(percent);
75if(IE) document.all.floater_left.style.pixelLeft += percent;
76if(NS) document.floater_left.left += percent;
77lastScrollX = lastScrollX + percent;
78}
79}
80if(NS || IE) action = window.setInterval("heartBeat()",1);var ad_80= new Array(1);
81var ad_250= new Array(1);
82ad_80[0]="<a href="http://www.dfeng.net" target="_blank"><img border="0" src="/skin/adv43/ad/ad_ad.jpg"/></a>";
83ad_250[0]="<a href="http://www.dfeng.net" target="_blank"><img border="0" src="/skin/adv43/ad/ad_ad.jpg"/></a>";
84var imgheight;
85var fubioleft;
86window.screen.width>800 ? fubioleft=15:fubioleft=15
87document.write('<div id="floater_right" style="Z-INDEX: 25; LEFT:'+fubioleft+'px; WIDTH: 28px;POSITION: absolute; TOP: 42px; HEIGHT: 22px">');
88ad_now = new Date();
89ad_id= ad_now.getSeconds() %1
90
91function myload()
92{
93if (navigator.appName == "Netscape")
94{
95document.div_right_80.pageX=+window.innerWidth-130;
96document.div_right_250.pageX=+window.innerWidth-300;
97mymove();
98}
99else
100{
101div_right_80.style.left=document.body.offsetWidth-130;
102div_right_250.style.left=document.body.offsetWidth-300;
103mymove();
104}
105}
106function mymove()
107{
108if(document.ns)
109{
110document.div_right_80.left=pageXOffset+window.innerWidth-130;
111document.div_right_250.left=pageXOffset+window.innerWidth-300;
112setTimeout("mymove();",20)
113}
114else
115{
116div_right_80.style.left=document.body.scrollLeft+document.body.offsetWidth-145;
117div_right_250.style.left=document.body.scrollLeft+document.body.offsetWidth-300;
118setTimeout("mymove();",20)
119}
120}
121
122var adhead1="<div id="div_right_80" onmouseover="bigshow_right();" style="position:absolute; width:95px; height:60px; z-index:12">";
123var adhead2="</div><div id="div_right_250" onmouseout="bighide_right();" style="position:absolute; visibility: hidden; z-index:13;width: 250; height: 250"><div align="right">";
124document.write(adhead1+ad_80[ad_id]+adhead2+ad_250[ad_id]+"</div></div>");
125myload()
126document.write ("</div>");
127self.onError=null;
128currentX_right = currentY_right = 0;
129whichIt_right = null;
130lastScrollX_right = 0; lastScrollY_right = 0;
131NS = (document.layers) ? 1 : 0;
132IE = (document.all) ? 1: 0;
133function heartBeat_right() {
134if(IE) {
135diffY_right = document.body.scrollTop;
136diffX_right = document.body.scrollLeft; }
137if(NS) {
138diffY_right = self.pageYOffset; diffX_right = self.pageXOffset; }
139if(diffY_right != lastScrollY_right) {
140percent_right = .5 * (diffY_right - lastScrollY_right);
141if(percent_right > 0) percent_right = Math.ceil(percent_right);
142else percent_right = Math.floor(percent_right);
143if(IE) document.all.floater_right.style.pixelTop += percent_right;
144if(NS) document.floater_right.top += percent_right;
145lastScrollY_right = lastScrollY_right + percent_right;
146}
147if(diffX_right != lastScrollX_right) {
148percent_right = .5 * (diffX_right - lastScrollX_right);
149if(percent_right > 0) percent_right = Math.ceil(percent_right);
150else percent_right = Math.floor(percent_right);
151if(IE) document.all.floater_right.style.pixelLeft += percent_right;
152if(NS) document.floater_right.left += percent_right;
153lastScrollX_right = lastScrollX_right + percent_right;
154}
155}
156if(NS || IE) action = window.setInterval("heartBeat_right()",1);
157function bigshow_right(){
158document.all.div_right_250.style.visibility = 'visible';
159document.all.div_right_80.style.visibility = 'hidden';
160}
161function bighide_right(){
162document.all.div_right_80.style.visibility = 'visible';
163document.all.div_right_250.style.visibility = 'hidden';
164}document.write('');
165document.write('');
166document.write('');
167
168
169把上面的代码另存为一个JS文件,然后在想实现此效果的页面用
170
171
172
173<script language="javascript1.2" src="*.js" type="text/javascript"></script>
174
175
176
177调用即可,*代表你另存的文件名!注意修改广告图片地址和连接地址!
178与前面两个代码不同的是,广告图下方增加了一个图片按纽,允许访客点击关闭广告图片,下面文本框中就是实现效果所需代码:
179
180
181var delta=0.015;
182var collection;
183var closeB=false;
184function floaters() {
185this.items = [];
186this.addItem = function(id,x,y,content)
187{
188document.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>');
189
190var newItem = {};
191newItem.object = document.getElementById(id);
192newItem.x = x;
193newItem.y = y;
194this.items[this.items.length] = newItem;
195}
196this.play = function()
197{
198collection = this.items
199setInterval('play()',30);
200}
201}
202function play()
203{
204if(screen.width<=800 || closeB)
205{
206for(var i=0;i<collection.length;i++) ;="" collection[i].object.style.display="none" dx="(dx" followobj="collection[i].object;" followobj_x="(typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x);" followobj_y="(typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);" for(var="" i="0;i<collection.length;i++)" if(followobj.offsetleft!="(document.body.scrollLeft+followObj_x))" return;="" var="" {="" }="">0?1:-1)*Math.ceil(Math.abs(dx));
207followObj.style.left=followObj.offsetLeft+dx;
208}
209if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) {
210var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
211dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
212followObj.style.top=followObj.offsetTop+dy;
213}
214followObj.style.display = '';
215}
216}
217function closeBanner()
218{
219closeB=true;
220return;
221}
222var theFloaters = new floaters();
223//
224theFloaters.addItem('followDiv1','document.body.clientWidth-100',0,'<a href="http://www.dfeng.net" onclick="closeBanner();" target="_blank"><img border="0" height="554" src="ad/doublead/right.gif" width="100"/></a><br/><br/><img onclick="closeBanner();" src="ad/doublead/close.gif"/>');
225theFloaters.addItem('followDiv2',0,0,'<a href="http://www.dfeng.net" onclick="closeBanner();" target="_blank"><img border="0" height="400" src="ad/doublead/ad_ad.gif" width="100"/></a><br/><br/><img onclick="closeBanner();" src="ad/doublead/close.gif"/>');
226theFloaters.play();
227
228
229把上面的代码另存为一个JS文件,然后在想实现此效果的页面用 调用即可,*代表你另存的文件名!注意修改广告图片地址和连接地址!
230**浮动对联广告---之左侧代码**
231如果您想只有一侧显示的话,下面是实现左侧效果所需代码:
232
233
234var ad_float_left_src ="图片地址";
235var ad_float_left_url ="地址";
236var ad_float_left_type = "";
237document.ns = navigator.appName == "Microsoft Internet Explorer"
238var imgheight_close
239var imgleft
240window.screen.width>800 ? imgheight_close=120:imgheight_close=120
241window.screen.width>800 ? imgleft=8:imgleft=122
242function myload()
243{
244myleft.style.top=document.body.scrollTop+document.body.offsetHeigh
245t-imgheight_close;
246myleft.style.left=imgleft;
247leftmove();
248}
249function leftmove()
250{
251myleft.style.top=document.body.scrollTop+document.body.offsetHeigh
252t-imgheight_close;
253myleft.style.left=imgleft;
254setTimeout("leftmove();",50)
255}
256function MM_reloadPage(init) { //reloads the window if Nav4
257resized
258if (init==true) with (navigator) {if ((appName=="Netscape")&&
259(parseInt(appVersion)==4)) {
260document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
261onresize=MM_reloadPage; }}
262else if (innerWidth!=document.MM_pgW || innerHeight!
263=document.MM_pgH) location.reload();
264}
265MM_reloadPage(true)
266function close_float_left(){
267myleft.style.visibility='hidden';
268}
269document.write("<div id="myleft" style="position:
270absolute;width:80;top:300;left:5;visibility: visible;z-index: 1">"
271+"<style>"
272+"A.closefloat:link,A.refloat:visited {text-
273decoration:none;color:#000000;font-size:12px}"
274+"A.closefloat:active,A.refloat:hover {text-decoration:underline;color:#0000FF;font-size:12px}"
275+"</style>"
276+"<table border="0" cellpadding="0" cellspacing="0"><tr><td>");
277if(document.ns){
278if(ad_float_left_type!="swf")
279document.write("<a href='" + ad_float_left_url + "' target="_blank"><img border="0" height="31" src='" + ad_float_left_src + "' width="88"/></a>");
280else
281document.write("<embed height="80" id="changhongout" quality="high" src='" + ad_float_left_src + "' type="application/x-shockwave-
282flash" width="80"/>");
283document.write("</td></tr><tr><td align="right" height="20" width="80"><a class="closefloat" href="javascript:close_float_left();void(0);"><b><font color="#ff0000">关闭</font></b></a></td></tr>"
284+"</table>"
285+"</div>");
286myload()}
287
288
289把上面的代码另存为一个*.JS文件,然后在想实现此效果的页面用
290
291
292<script src="*.js"></script>
293
294调用即可,*代表你另存的文件名!注意修改广告图片地址和连接地址!相应的参数可以根据页面自行调整。</collection.length;i++)></div></collection.length;i++)>