将广告内容放在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>
漂浮广告代码兼容ie、firefox，多个漂浮不冲突，调用只需两行代码
2014-04-29
949
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
原文:漂浮广告代码兼容ie、firefox，多个漂浮不冲突，调用只需两行代码将广告内容放在div中，设置一个id，然后用下面方法调用var adcls=new AdMove("div的id");adcls.
原文:
漂浮广告代码兼容ie、firefox，多个漂浮不冲突，调用只需两行代码
目录
相关文章
|
7月前
|
编解码
移动开发
前端开发
|
3月前
|
Web App开发
JavaScript
前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11，Maxthon 1.6.7，Firefox30、31，360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11，Maxthon 1.6.7，Firefox30、31，360极速浏览器7.5.3.308下测试正常
50
0
0
|
3月前
|
Web App开发
JavaScript
前端开发
|
7月前
|
移动开发
前端开发
JavaScript
|
JavaScript
|
前端开发
JavaScript
UED
|
JavaScript
|
移动开发
前端开发
JavaScript
|
Web App开发
JavaScript
JS 获取当前浏览器类型（IE、Chrome、Edge、Firefox、Opera、UC、QQ）
JS 获取当前浏览器类型（IE、Chrome、Edge、Firefox、Opera、UC、QQ）
1245
0
0
|
Web App开发
前端开发
热门文章
最新文章
1
IE6, IE7, IE8 CSS 兼容速查表
2
强制删除桌面多余或恶意IE图标方法 :强制删除桌面多余或恶意IE图标方法：
3
NA-NP-IE系列实验45:trunk 配置
4
uploadify插件在IE下的BUG
5
[Web开发] 如何改变IE滚动条的颜色
6
刚发补丁又曝漏洞 IE浏览器迎来“倒春寒”
7
刷新IE收藏夹图标
8
IE10假死/未响应是为什么？
9
IE内存泄露与无法回收研究小结
10
坑爹的ie6--解决ie6下qq浮动窗口不兼容问题
1
零基础学会用Airtest-Selenium对Firefox进行自动化测试
118
2
谷歌在一个函数中放入 2 万个变量，引发 Firefox 崩溃；
89
3
Docker本地部署开源浏览器Firefox并远程访问进行测试
334
4
Docker本地部署Firefox火狐浏览器并远程访问
734
5
Firefox的缓存问题
78
6
解决在访问tomcat时出现连接失败，Firefox 无法建立到 localhost:8080 服务器的连接的问题~
235
7
百度搜索：蓝易云【Ubuntu Linux中如何删除Firefox Snap？】
410
8
firefox_dev_linux下载安装配置(部分系统自带包请看结尾)
137
9
使用Python爬虫获取Firefox浏览器的用户评价和反馈
132
10
应用于Firefox浏览器关于burpsuite的代理问题-详解
219