首页 > 代码库 > 漂浮广告代码兼容ie、firefox，多个漂浮不冲突，调用只需两行代码

漂浮广告代码兼容ie、firefox，多个漂浮不冲突，调用只需两行代码

2024-07-02 01:57:33   219人阅读

原文:漂浮广告代码兼容ie、firefox，多个漂浮不冲突，调用只需两行代码

将广告内容放在div中，设置一个id，然后用下面方法调用
var adcls=new
AdMove("div的id");
adcls.Run();
注意，在调用前要先引用Main.js和AdFloat.js,div也要在调用前写好，原因就不用说了吧

或者也可以用下面方法，在页面加载完成时调用，就不用考虑位置了addEvent(window,"load",initad);
function
initad(){
var adcls=new
AdMove("div的id");
adcls.Run();
}

还有两个方法一般情况下没什么用，有兴趣的可以试试，功能是设置漂浮的起始坐标和方向的，如果省掉的话是随机位置随机方向
adcls.SetLocation(x,y)
adcls.SetDirection(dirx,diry)

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

下面是演示


<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
>
<head><title>wahaha</title>
<meta
http-equiv="Content-Type" content="text/html;charset=gb2312" />
<script
type="text/javascript">
<!--
//公共脚本文件 main.js
function
addEvent(obj,evtType,func,cap){
cap=cap||false;
if(obj.addEventListener){
obj.addEventListener(evtType,func,cap);
return
true;
}else if(obj.attachEvent){
if(cap){
obj.setCapture();
return
true;
}else{
return obj.attachEvent("on" +
evtType,func);
}
}else{
return false;
}
}
function
getPageScroll(){
var xScroll,yScroll;
if (self.pageXOffset) {
xScroll =
self.pageXOffset;
} else if (document.documentElement &&
document.documentElement.scrollLeft){
xScroll =
document.documentElement.scrollLeft;
} else if (document.body) {
xScroll =
document.body.scrollLeft;
}
if (self.pageYOffset) {
yScroll =
self.pageYOffset;
} else if (document.documentElement &&
document.documentElement.scrollTop){
yScroll =
document.documentElement.scrollTop;
} else if (document.body) {
yScroll =
document.body.scrollTop;
}
arrayPageScroll = new
Array(xScroll,yScroll);
return arrayPageScroll;
}
function
GetPageSize(){
var xScroll, yScroll;
if (window.innerHeight &&
window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll =
window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight
> document.body.offsetHeight){
xScroll =
document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else
{
xScroll = document.body.offsetWidth;
yScroll =
document.body.offsetHeight;
}
var windowWidth, windowHeight;
if
(self.innerHeight) {
windowWidth = self.innerWidth;
windowHeight =
self.innerHeight;
} else if (document.documentElement &&
document.documentElement.clientHeight) {
windowWidth =
document.documentElement.clientWidth;
windowHeight =
document.documentElement.clientHeight;
} else if (document.body)
{
windowWidth = document.body.clientWidth;
windowHeight =
document.body.clientHeight;
}
if(yScroll <
windowHeight){
pageHeight = windowHeight;
} else {
pageHeight =
yScroll;
}
if(xScroll < windowWidth){
pageWidth = windowWidth;
}
else {
pageWidth = xScroll;
}
arrayPageSize = new
Array(pageWidth,pageHeight,windowWidth,windowHeight)
return
arrayPageSize;
}
//广告脚本文件 AdMove.js
/*
例子
<div
id="Div2">
***** content ******
</div>
var ad=new
AdMove("Div2");
ad.Run();
*/
////////////////////////////////////////////////////////
var
AdMoveConfig=new
Object();
AdMoveConfig.IsInitialized=false;
AdMoveConfig.ScrollX=0;
AdMoveConfig.ScrollY=0;
AdMoveConfig.MoveWidth=0;
AdMoveConfig.MoveHeight=0;
AdMoveConfig.Resize=function(){
var
winsize=GetPageSize();
AdMoveConfig.MoveWidth=winsize[2];
AdMoveConfig.MoveHeight=winsize[3];
AdMoveConfig.Scroll();
}
AdMoveConfig.Scroll=function(){
var
winscroll=getPageScroll();
AdMoveConfig.ScrollX=winscroll[0];
AdMoveConfig.ScrollY=winscroll[1];
}
addEvent(window,"resize",AdMoveConfig.Resize);
addEvent(window,"scroll",AdMoveConfig.Scroll);
function
AdMove(id){
if(!AdMoveConfig.IsInitialized){
AdMoveConfig.Resize();
AdMoveConfig.IsInitialized=true;
}
var
obj=document.getElementById(id);
obj.style.position="absolute";
var
W=AdMoveConfig.MoveWidth-obj.offsetWidth;
var
H=AdMoveConfig.MoveHeight-obj.offsetHeight;
var x = W*Math.random(),y =
H*Math.random();
var rad=(Math.random()+1)*Math.PI/6;
var
kx=Math.sin(rad),ky=Math.cos(rad);
var dirx = (Math.random()<0.5?1:-1),
diry = (Math.random()<0.5?1:-1);
var step = 1;
var
interval;
this.SetLocation=function(vx,vy){x=vx;y=vy;}
this.SetDirection=function(vx,vy){dirx=vx;diry=vy;}
obj.CustomMethod=function(){
obj.style.left
= (x + AdMoveConfig.ScrollX) + "px";
obj.style.top = (y +
AdMoveConfig.ScrollY) +
"px";
rad=(Math.random()+1)*Math.PI/6;
W=AdMoveConfig.MoveWidth-obj.offsetWidth;
H=AdMoveConfig.MoveHeight-obj.offsetHeight;
x
= x + step*kx*dirx;
if (x < 0){dirx = 1;x =
0;kx=Math.sin(rad);ky=Math.cos(rad);}
if (x > W){dirx = -1;x =
W;kx=Math.sin(rad);ky=Math.cos(rad);}
y = y + step*ky*diry;
if (y <
0){diry = 1;y = 0;kx=Math.sin(rad);ky=Math.cos(rad);}
if (y > H){diry =
-1;y = H;kx=Math.sin(rad);ky=Math.cos(rad);}
}
this.Run=function(){
var
delay = 10;
interval=setInterval(obj.CustomMethod,delay);
obj.onmouseover=function(){clearInterval(interval);}
obj.onmouseout=function(){interval=setInterval(obj.CustomMethod,
delay);}
}
}
//-->
</script>
</head>
<body>
<div
id="gg1"
style="width:100px;height:100px;background-color:red;color:yellow">
广告1
</div>
<div
id="gg2"
style="width:100px;height:100px;background-color:blue;color:yellow">
广告2
</div>
<div
id="gg3"
style="width:100px;height:100px;background-color:green;color:yellow">
广告3
</div>
<script
type="text/javascript">
<!--
var ad1=new
AdMove("gg1");
ad1.Run();
var ad2=new AdMove("gg2");
ad2.Run();
var
ad3=new
AdMove("gg3");
ad3.Run();
//-->
</script>
</body>
</html>


联系
我们