现在很多网站广告做的如火如荼,现在我就来介绍一下常见的对联浮动广告效果的代码使用方法,介绍的这种效果,在1024*768分辨率下正常显示,在800*600的分辨率下可以自动隐藏,以免遮住页面影响访问者浏览内容,下面就是实现效果所需代码:
var
delta
=
0.015
var
collection;
function
floaters()
...
{ this .items = []; this .addItem = function (id,x,y,content) ... { 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> ' ); 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 < collection.length;i ++ ) ... { collection[i].object.style.display = ' none ' ; } return ; } for ( var i = 0 ;i < collection.length;i ++ ) ... { var followObj = collection[i].object; var followObj_x = ( typeof (collection[i].x) == ' string ' ? eval(collection[i].x):collection[i].x); var followObj_y = ( typeof (collection[i].y) == ' string ' ? eval(collection[i].y):collection[i].y); if (followObj.offsetLeft != (document.body.scrollLeft + followObj_x)) ... { var dx = (document.body.scrollLeft + followObj_x - followObj.offsetLeft) * delta; dx = (dx > 0 ? 1 : - 1 ) * Math.ceil(Math.abs(dx)); followObj.style.left = followObj.offsetLeft + dx; } if (followObj.offsetTop != (document.body.scrollTop + followObj_y)) ... { var dy = (document.body.scrollTop + followObj_y - followObj.offsetTop) * delta; dy = (dy > 0 ? 1 : - 1 ) * Math.ceil(Math.abs(dy)); followObj.style.top = followObj.offsetTop + dy; } followObj.style.display = '' ; } }
var
theFloaters
=
new
floaters(); theFloaters.addItem(
'
followDiv1
'
,
'
document.body.clientWidth-100
'
,
0
,
'
</a><br><a href=广告链接地址 target=_blank><img src=广告图片地址 width=100 height=400 border=0></a>
'
); theFloaters.addItem(
'
followDiv2
'
,
0
,
0
,
'
<br><a href=广告链接地址 target=_blank><img src=广告图片地址 width=100 height=400 border=0></a>
'
); theFloaters.play();
把上面的代码另存为一个JS文件,然后在想实现此效果的页面用 调用即可!注意修改广告图片地址和连接地址! 鼠标感应] 与前面一个代码不同的是,当鼠标移动到广告图片上是可以感应显示另外设置好的广告大图效果,下面就是实现效果所需代码:
function
bigshow()
...
{ document.all.div_250.style.visibility = ' visible ' ; document.all.div_80.style.visibility = ' hidden ' ; }
function
bighide()
...
{ document.all.div_80.style.visibility = ' visible ' ; document.all.div_250.style.visibility = ' hidden ' ; }
var
ad_80
=
new
Array(
1
);
var
ad_250
=
new
Array(
1
); ad_80[
0
]
=
"
<a href=http://www.dfeng.net target=_blank><img src=/skin/adv43/ad/ad_ad.gif border=0></a>
"
; ad_250[
0
]
=
"
<a href=http://www.dfeng.net target=_blank><img src=/skin/adv43/ad/ad_ad2.gif border=0></a>
"
;
var
imgheight;
var
fubioleft; window.screen.width
>
800
?
fubioleft
=
15
:fubioleft
=
15
document.write(
'
<DIV id=floater_left style="Z-INDEX: 25; LEFT:
'
+
fubioleft
+
'
px; WIDTH: 28px;POSITION: absolute; TOP: 42px; HEIGHT: 22px">
'
); ad_now
=
new
Date(); ad_id
=
ad_now.getSeconds()
%
1
var
adhead1
=
"
<div id=div_80 style='position:absolute; width:95px; height:62px; z-index:12' onMouseOver=bigshow();>
"
;
var
adhead2
=
"
</div><div id=div_250 style='position:absolute; visibility: hidden; z-index:13;width: 80; height: 60' onMouseOut=bighide();>
"
;
document.write(adhead1
+
ad_80[ad_id]
+
adhead2
+
ad_250[ad_id]
+
"
</div>
"
); document.write (
"
</div>
"
); self.onError
=
null
; currentX
=
currentY
=
0
; whichIt
=
null
; lastScrollX
=
0
; lastScrollY
=
0
; NS
=
(document.layers)
?
1
:
0
; IE
=
(document.all)
?
1
:
0
;
function
heartBeat()
...
{ if (IE) ... { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } if (NS) ... { diffY = self.pageYOffset; diffX = self.pageXOffset; } if (diffY != lastScrollY) ... { percent = . 5 * (diffY - lastScrollY); if (percent > 0 ) percent = Math.ceil(percent); else percent = Math.floor(percent); if (IE) document.all.floater_left.style.pixelTop += percent; if (NS) document.floater_left.top += percent; lastScrollY = lastScrollY + percent; } if (diffX != lastScrollX) ... { percent = . 5 * (diffX - lastScrollX); if (percent > 0 ) percent = Math.ceil(percent); else percent = Math.floor(percent); if (IE) document.all.floater_left.style.pixelLeft += percent; if (NS) document.floater_left.left += percent; lastScrollX = lastScrollX + percent; } }
if
(NS
||
IE) action
=
window.setInterval(
"
heartBeat()
"
,
1
);
var
ad_80
=
new
Array(
1
);
var
ad_250
=
new
Array(
1
); ad_80[
0
]
=
"
<a href=http://www.dfeng.net target=_blank><img src=/skin/adv43/ad/ad_ad.jpg border=0></a>
"
; ad_250[
0
]
=
"
<a href=http://www.dfeng.net target=_blank><img src=/skin/adv43/ad/ad_ad.jpg border=0></a>
"
;
var
imgheight;
var
fubioleft; window.screen.width
>
800
?
fubioleft
=
15
:fubioleft
=
15
document.write(
'
<DIV id=floater_right style="Z-INDEX: 25; LEFT:
'
+
fubioleft
+
'
px; WIDTH: 28px;POSITION: absolute; TOP: 42px; HEIGHT: 22px">
'
); ad_now
=
new
Date(); ad_id
=
ad_now.getSeconds()
%
1
function
myload()
...
{ if (navigator.appName == " Netscape " ) ... { document.div_right_80.pageX =+ window.innerWidth - 130 ; document.div_right_250.pageX =+ window.innerWidth - 300 ; mymove(); } else ... { div_right_80.style.left = document.body.offsetWidth - 130 ; div_right_250.style.left = document.body.offsetWidth - 300 ; mymove(); } }
function
mymove()
...
{ if (document.ns) ... { document.div_right_80.left = pageXOffset + window.innerWidth - 130 ; document.div_right_250.left = pageXOffset + window.innerWidth - 300 ; setTimeout( " mymove(); " , 20 ) } else ... { div_right_80.style.left = document.body.scrollLeft + document.body.offsetWidth - 145 ; div_right_250.style.left = document.body.scrollLeft + document.body.offsetWidth - 300 ; setTimeout( " mymove(); " , 20 ) } }
var
adhead1
=
"
<div id=div_right_80 style='position:absolute; width:95px; height:60px; z-index:12' onMouseOver=bigshow_right();>
"
;
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>
"
; document.write(adhead1
+
ad_80[ad_id]
+
adhead2
+
ad_250[ad_id]
+
"
</div></div>
"
); myload() document.write (
"
</div>
"
); self.onError
=
null
; currentX_right
=
currentY_right
=
0
; whichIt_right
=
null
; lastScrollX_right
=
0
; lastScrollY_right
=
0
; NS
=
(document.layers)
?
1
:
0
; IE
=
(document.all)
?
1
:
0
;
function
heartBeat_right()
...
{ if (IE) ... { diffY_right = document.body.scrollTop; diffX_right = document.body.scrollLeft; } if (NS) ... { diffY_right = self.pageYOffset; diffX_right = self.pageXOffset; } if (diffY_right != lastScrollY_right) ... { percent_right = . 5 * (diffY_right - lastScrollY_right); if (percent_right > 0 ) percent_right = Math.ceil(percent_right); else percent_right = Math.floor(percent_right); if (IE) document.all.floater_right.style.pixelTop += percent_right; if (NS) document.floater_right.top += percent_right; lastScrollY_right = lastScrollY_right + percent_right; } if (diffX_right != lastScrollX_right) ... { percent_right = . 5 * (diffX_right - lastScrollX_right); if (percent_right > 0 ) percent_right = Math.ceil(percent_right); else percent_right = Math.floor(percent_right); if (IE) document.all.floater_right.style.pixelLeft += percent_right; if (NS) document.floater_right.left += percent_right; lastScrollX_right = lastScrollX_right + percent_right; } }
if
(NS
||
IE) action
=
window.setInterval(
"
heartBeat_right()
"
,
1
);
function
bigshow_right()
...
{ document.all.div_right_250.style.visibility = ' visible ' ; document.all.div_right_80.style.visibility = ' hidden ' ; }
function
bighide_right()
...
{ document.all.div_right_80.style.visibility = ' visible ' ; document.all.div_right_250.style.visibility = ' hidden ' ; }
document.write(
''
); document.write(
''
); document.write(
''
);
【允许关闭】 与前面两个代码不同的是,广告图下方增加了一个图片按纽,允许访客点击关闭广告图片,下面文本框中就是实现效果所需代码:
var
delta
=
0.015
;
var
collection;
var
closeB
=
false
;
function
floaters()
...
{ this .items = []; this .addItem = function (id,x,y,content) ... { 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> ' ); 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() ' , 30 ); } }
function
play()
...
{ if (screen.width <= 800 || closeB) ... { for ( var i = 0 ;i < collection.length;i ++ ) ... { collection[i].object.style.display = ' none ' ; } return ; } for ( var i = 0 ;i < collection.length;i ++ ) ... { var followObj = collection[i].object; var followObj_x = ( typeof (collection[i].x) == ' string ' ? eval(collection[i].x):collection[i].x); var followObj_y = ( typeof (collection[i].y) == ' string ' ? eval(collection[i].y):collection[i].y); if (followObj.offsetLeft != (document.body.scrollLeft + followObj_x)) ... { var dx = (document.body.scrollLeft + followObj_x - followObj.offsetLeft) * delta; dx = (dx > 0 ? 1 : - 1 ) * Math.ceil(Math.abs(dx)); followObj.style.left = followObj.offsetLeft + dx; } if (followObj.offsetTop != (document.body.scrollTop + followObj_y)) ... { var dy = (document.body.scrollTop + followObj_y - followObj.offsetTop) * delta; dy = (dy > 0 ? 1 : - 1 ) * Math.ceil(Math.abs(dy)); followObj.style.top = followObj.offsetTop + dy; } followObj.style.display = '' ; } }
function
closeBanner()
...
{ closeB = true ; return ; }
var
theFloaters
=
new
floaters();
//
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();">
'
); 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();">
'
); theFloaters.play();
浮动对联广告---之左侧代码 如果您想只有一侧显示的话,下面是实现左侧效果所需代码:
var
ad_float_left_src
=
"
图片地址
"
;
var
ad_float_left_url
=
"
地址
"
;
var
ad_float_left_type
=
""
; document.ns
=
navigator.appName
==
"
Microsoft Internet Explorer
"
var
imgheight_close
var
imgleft window.screen.width
>
800
?
imgheight_close
=
120
:imgheight_close
=
120
window.screen.width
>
800
?
imgleft
=
8
:imgleft
=
122
function
myload()
...
{ myleft.style.top = document.body.scrollTop + document.body.offsetHeigh t - imgheight_close; myleft.style.left = imgleft; leftmove(); }
function
leftmove()
...
{ myleft.style.top = document.body.scrollTop + document.body.offsetHeigh t - imgheight_close; myleft.style.left = imgleft; setTimeout( " leftmove(); " , 50 ) }
function
MM_reloadPage(init)
...
{ // reloads the window if Nav4 resized if (init == true ) with (navigator) ... { if ((appName == " Netscape " ) && (parseInt(appVersion)== 4 )) ... { document.MM_pgW = innerWidth; document.MM_pgH = innerHeight; onresize = MM_reloadPage; } } else if (innerWidth != document.MM_pgW || innerHeight ! = document.MM_pgH) location.reload(); }
MM_reloadPage(
true
)
function
close_float_left()
...
{ myleft.style.visibility = ' hidden ' ; }
document.write(
"
<div id=myleft style='position: absolute;width:80;top:300;left:5;visibility: visible;z-index: 1'>
"
+
"
<style>
"
+
"
A.closefloat:link,A.refloat:visited {text- decoration:none;color:#000000;font-size:12px}
"
+
"
A.closefloat:active,A.refloat:hover {text-decoration:underline;color:#0000FF;font-size:12px}
"
+
"
</style>
"
+
"
<table border=0 cellpadding=0 cellspacing=0><tr><td>
"
);
if
(document.ns)
...
{ if (ad_float_left_type != " swf " ) document.write( " <a href=' " + ad_float_left_url + " ' target = '_blank'><img src=' " + ad_float_left_src + " ' WIDTH=88 height=31 border=0></a> " ); else document.write(" <EMBED src=' " + ad_float_left_src + " ' quality=high WIDTH=80 HEIGHT=80 TYPE='application/x-shockwave- flash' id=changhongout ></EMBED> " ); document.write( " </td></tr><tr><td width=80 height=20 align=right><a href='javascript:close_float_left();void(0);' class=closefloat><b><font color=#ff0000>关闭</font></b></a></td></tr> " + " </table> " + " </div> " ); myload()}