我在网上找到这段代码,能实现多个漂浮效果,我想把其中的js代码独立出来保存到.js文件,并且能在.html里调用,并达到漂浮效果,试了几次都不成功。<!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>漂浮广告代码 - LIEHUO.NET</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
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:90px;height:90px;background-color:red;color:blue">
烈火网
</div>
<div id="gg2" style="width:90px;height:90px;background-color:BLUE;color:WHITE">
LIEHUO.NET
</div>
<div id="gg3" style="width:90px;height:90px;background-color:green;color:blue">
关注站长
</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>

解决方案 »

  1.   

    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
    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);
    }
    }
    }document.write('<div id="gg1" style="width:90px;height:90px;background-color:red;color:blue">烈火网</div>');
    document.write('<div id="gg2" style="width:90px;height:90px;background-color:BLUE;color:WHITE">LIEHUO.NET</div>');
    document.write('<div id="gg3" style="width:90px;height:90px;background-color:green;color:blue">关注站长</div>');var ad1=new AdMove("gg1");
    ad1.Run();
    var ad2=new AdMove("gg2");
    ad2.Run();
    var ad3=new AdMove("gg3");
    ad3.Run();
      

  2.   

    添加新项,选择Jscript文件,比如命名为test.js将<script></script>内所有东西,考到这个test.js文件里,不用拷<script></script>标签然后再代码里<script type="text/javascript" src="test.js"></script>这样就可以在页面里调用了
      

  3.   

    <!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>漂浮广告代码 - LIEHUO.NET</title>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
    <script type="text/javascript" src="ad.js"></script>
    </head>
    <body>
    <div id="gg1" style="width:90px;height:90px;background-color:red;color:blue">
    烈火网
    </div>
    <div id="gg2" style="width:90px;height:90px;background-color:BLUE;color:WHITE">
    LIEHUO.NET
    </div>
    <div id="gg3" style="width:90px;height:90px;background-color:green;color:blue">
    关注站长
    </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>
    ____________ad.js_______________
    // JavaScript Document
    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
    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);}
    }
    }