原文:漂浮广告代码兼容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>

漂浮广告代码兼容ie、firefox，多个漂浮不冲突，调用只需两行代码的更多相关文章

  1. 只需一行代码！Python中9大时间序列预测模型

    在时间序列问题上,机器学习被广泛应用于分类和预测问题.当有预测模型来预测未知变量时,在时间充当独立变量和目标因变量的情况下,时间序列预测就出现了. 预测值可以是潜在雇员的工资或银行账户持有人的信用评分 ...

  2. Github 大牛封装 Python 代码，实现自动发送邮件只需三行代码

    *注意:全文代码可左右滑动观看 在运维开发中,使用 Python 发送邮件是一个非常常见的应用场景.今天一起来探讨一下,GitHub 的大牛门是如何使用 Python 封装发送邮件代码的. 一般发邮件 ...

  3. c# 输出excel、word实例只需一行代码

    第一.首先下载 WindICFrameNet.dll 下载地址:http://pan.baidu.com/s/1dDBqC9r 第二.前台代码 <div style="display: ...

  4. Iframe高度自适应（兼容IE/Firefox、同域/跨域）

    在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...

  5. gRaphael——JavaScript 矢量图表库：两行代码实现精美图表

    gRaphael 是一个致力于帮助开发人员在网页中绘制各种精美图表的 Javascript 库,基于强大的 Raphael 矢量图形库.你只需要编写几行简单的代码就能创建出精美的条形图.饼图.点图和曲 ...

  6. 两行代码搞定网站gzip压缩

    网站使用gzip压缩的好处就不用多说了吧,自行脑补,来说一下如何使用nodejs实现gzip压缩,只需要两行代码,so ease. 通过nodejs实现gzip 需要用到的模块 compression ...

  7. JavaScript浮动广告代码，容纯DIV/CSS对联漂浮广告代码，兼容性非常好的js右下角与漂浮广告代码

    基于JavaScript代码实现随机漂浮图片广告,javascript图片广告 在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE html>类似标签之后,漂 ...

  8. Js弹性漂浮广告代码

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  9. JQuery漂浮广告代码

    <!doctype html><html><head><meta charset="utf-8"><title>jque ...

随机推荐

  1. 【UFLDL】多层神经网络

    请参见原始英文教程地址:http://ufldl.stanford.edu/tutorial/supervised/MultiLayerNeuralNetworks 本文是在学习该教程时记得笔记,供參 ...

  2. 【POJ1741】Tree 树分而治之 模板略？

    做广告: #include <stdio.h> int main() { puts("转载请注明出处[vmurder]谢谢"); puts("网址:blog. ...

  3. Android使得手机拍照功能的发展（源共享）

    Android系统调用手机拍照功能有两种方法来直接调用手机自带摄像头还有一个就是要当心自己的节拍. 例Camera360 强大的一个在每个操作系统都有一个手机摄影软件:您可以捕捉不同风格,不同特效的照 ...

  4. POJ 1019 Number Sequence 解读

    这是一个看似简单,其实很难受. 本来我想发挥它的标题轨道基础.没想到反被消遣-_-|||. 看它在个人基础上,良好的数学就干脆点,但由于过于频繁,需求将被纳入全,因此,应该难度4星以上. 方法就是直接 ...

  5. 10令人惊叹的模型的影响HTML5应用程序及源代码

    HTML5已经越来越流行起来了.尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用.方便大家学习,也将应 ...

  6. freemarker错误九

    1.错误叙述性说明 五月 30, 2014 11:52:04 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template p ...

  7. ServletWeb缓存解决问题

    (1)为什么我们要防止这个问题的浏览器页面缓存: 所以在不须要缓存的页面中须要实现不缓存页面. 代码例如以下: package com.lc.HttpTest; import java.io.IOEx ...

  8. Mongodb安装和配置

    Mongodb之安装配置 安装 Mongodb的下载地址为Mongodb官网.下载时.你能够选择是安装包或者是压缩包. 下载完毕后.双击安装包并安装. 安装完毕后.你能够在安装文件夹看到下图中所见的文 ...

  9. C# 开机自动启动程序

    原文:C# 开机自动启动程序 新建一个winform拖一个checkbox进来.. 然后设置它的changed事件. 已经测试过,可以直接复制使用. private void checkBox1_Ch ...

  10. Cocos2d-x 单点触摸--让我们用手指动起来的精灵

    转载请注明出处:http://blog.csdn.net/oyangyufu/article/details/25656673 效果图: CCTouch类装载了触摸点的信息.包含触摸点的横纵坐标值和触 ...