AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2014-04-29 949
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:漂浮广告代码兼容ie、firefox，多个漂浮不冲突，调用只需两行代码将广告内容放在div中，设置一个id，然后用下面方法调用var adcls=new AdMove("div的id");adcls.
原文: 漂浮广告代码兼容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>

文章标签：
Web App开发
JavaScript
前端开发
关键词：
代码IE
代码IE firefox
代码Firefox
Firefox代码
IE兼容
杰克.陈
目录
相关文章
那维莱特
|
7月前
|
编解码 移动开发 前端开发
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
那维莱特
84 0
游客qeoynko2nmbgk
|
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下测试正常
游客qeoynko2nmbgk
50 0
尹正杰
|
3月前
|
Web App开发 JavaScript 前端开发
JavaScript基础知识-使用Firefox进行代码的调试(Debug)
关于如何使用Firefox浏览器进行JavaScript代码调试的基础知识介绍。
尹正杰
101 0
多加点香菜85
|
7月前
|
移动开发 前端开发 JavaScript
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？
多加点香菜85
90 0
快乐阿超
|
JavaScript
兼容IE浏览器
兼容IE浏览器
快乐阿超
107 0
子玉欸
|
前端开发 JavaScript UED
css中什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
css中什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
子玉欸
79 0
凯小默
|
JavaScript
vue里使用animated-scroll-to代替原生滚动实现兼容ie的平滑滚动定位
vue里使用animated-scroll-to代替原生滚动实现兼容ie的平滑滚动定位
凯小默
132 0
bug丶小狼人
|
移动开发 前端开发 JavaScript
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？
什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？
bug丶小狼人
77 0
卡尔特斯
|
Web App开发 JavaScript
JS 获取当前浏览器类型（IE、Chrome、Edge、Firefox、Opera、UC、QQ）
JS 获取当前浏览器类型（IE、Chrome、Edge、Firefox、Opera、UC、QQ）
卡尔特斯
1243 0
Onebound19970109110
|
Web App开发 前端开发
区分IE6,IE7,IE8,IE9,FireFox,Chrome浏览器的CSS hack
区分IE6,IE7,IE8,IE9,FireFox,Chrome浏览器的CSS hack
Onebound19970109110
108 0