<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<html>
<head>
<title>漂浮广告</title>
<body>
<div id="codefans_net" style="position:absolute">
<!--链接地址--><a href="/" target="_blank">
<!--图片地址--><img src="/default/logo.gif" border="0">
</a>
</div>
<script> 
var x = 50,y = 60 
var xin = true, yin = true 
var step = 1 
var delay = 10 
var obj=document.getElementById("codefans_net") 
function float() { 
var L=T=0
var R= document.body.clientWidth-obj.offsetWidth 
var B = document.body.clientHeight-obj.offsetHeight 
obj.style.left = x + document.body.scrollLeft 
obj.style.top = y + document.body.scrollTop 
x = x + step*(xin?1:-1) 
if (x < L) { xin = true; x = L} 
if (x > R){ xin = false; x = R} 
y = y + step*(yin?1:-1) 
if (y < T) { yin = true; y = T } 
if (y > B) { yin = false; y = B } 

var itl= setInterval("float()", delay) 
obj.onmouseover=function(){clearInterval(itl)} 
obj.onmouseout=function(){itl=setInterval("float()", delay)} 
</script>
</body>
</html>
</body>
</html>
去掉第一行就没有问题了,但是去掉第一行放在其他网页里版面就乱了

解决方案 »

  1.   

    obj.style.left
    要加单位的obj.style.left = x + document.body.scrollLeft + "px"
      

  2.   

    参考知识
    http://blog.csdn.net/net_lover/archive/2006/12/29/1467390.aspx
      

  3.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>漂浮广告</title>
    <script> 
    var x = 50,y = 60; 
    var xin = true, yin = true; 
    var step = 1; 
    var delay = 10; 
    var obj;
    function float() { 
    var L=T=0;
    var R= document.body.clientWidth-obj.offsetWidth; 
    var B = document.body.clientHeight-obj.offsetHeight; 
    obj.style.left = x + document.body.scrollLeft + "px"; 
    obj.style.top = y + document.body.scrollTop + "px"; 
    x = x + step*(xin?1:-1); 
    if (x < L) { xin = true; x = L;} 
    if (x > R){ xin = false; x = R;} 
    y = y + step*(yin?1:-1); 
    if (y < T) { yin = true; y = T; } 
    if (y > B) { yin = false; y = B; } 

    window.onload = function () {
    obj = document.getElementById("codefans_net"); 
    var itl= setInterval("float()", delay); 
    obj.onmouseover = function(){clearInterval(itl);} 
    obj.onmouseout = function(){itl=setInterval("float()", delay);} 
    };

    </script>
    </head>
    <body>
    <div id="codefans_net" style="position:absolute">
    <!--链接地址-->
    <a href="/" target="_blank">
    <!--图片地址--><img src="/default/logo.gif" border="0">
    </a>
    </div>
    </body>
    </html>
    不同的DOCTYPE会影响到你的css和js的
      

  4.   

    我要加入漂浮广告的网页里必须要加入
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    才能正常显示,所以不能去掉这一句,在不去掉这一句的基础上漂浮广告是直接飘到网页下面了
      

  5.   

    看来我没有说清楚,我的问题是要把这个浮动广告加入到首页,而首页必须要家“<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">”这句才能正常显示,而这段JS代码如果加上了这句,它在屏幕上浮动的时候不以当然窗口大小来浮动,直接跑到网页的最下方了,我想实现的是在当前屏幕窗口上来回浮动
      

  6.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head>
    <body>
    <p>页面内容</p><p>页面内容</p><p>页面内容</p><p>页面内容</p><p>页面内容</p>
    <p>页面内容</p><p>页面内容</p><p>页面内容</p><p>页面内容</p><p>页面内容</p>
    <p>页面内容</p><p>页面内容</p><p>页面内容</p><p>页面内容</p><p>页面内容</p>
    <div id="codefans_net" style="position:absolute;left:0;top:0;border:1px solid red;height:50px;width:50px">
    测试
    </div>
    <script> 
    var x = 50,y = 60 
    var xin = true, yin = true 
    var step = 1 
    var delay = 1var obj=document.getElementById("codefans_net") 
    function float() { 
    L=T=0
    var R= document.body.clientWidth-obj.offsetWidth 
    var B = document.body.clientHeight-obj.offsetHeight 
    if (window.console) window.console.log("R = " + R +  " B = " + B)
    obj.style.left = x + document.body.scrollLeft + "px"
    obj.style.top = y + document.body.scrollTop + "px"
    x = x + step*(xin?1:-1) 
    if (x < L) { xin = true; x = L} 
    if (x > R){ xin = false; x = R} y = y + step*(yin?1:-1) 
    if (y < T) { yin = true; y = T } 
    if (y > B) { yin = false; y = B } 

    var itl= setInterval("float()", delay) 
    obj.onmouseover=function(){clearInterval(itl)} 
    obj.onmouseout=function(){itl=setInterval("float()", delay)} </script>
    </body>
    </html>
      

  7.   

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head>
    <body>
    <div id="codefans_net" style="position:absolute;left:0;top:0;border:1px solid red;height:50px;width:50px">
    测试
    </div>
    <script> 
    var x = 50,y = 60 
    var xin = true, yin = true 
    var step = 1 
    var delay = 1
    var obj=document.getElementById("codefans_net") 
    function w()
    {
    var width=0;
    if(document.documentElement && document.documentElement.clientWidth){
    width=document.documentElement.clientWidth;}
    else if(document.body && document.body.clientWidth){
    width=document.body.clientWidth;}
    else if(window.innerWidth){
    width=window.innerWidth-18;}
    return width;
    }function h()
    {
    var height=0;
    if(window.innerHeight){
    height=window.innerHeight-18;}
    else if(document.documentElement&&document.documentElement.clientHeight){
    height=document.documentElement.clientHeight;}
    else if(document.body&&document.body.clientHeight){
    height=document.body.clientHeight;}
    return height;
    }function float() { 
    L=T=0
    var R= w()-obj.offsetWidth 
    var B = h()-obj.offsetHeight 
    if (window.console) window.console.log("R = " + R +  " B = " + B)
    obj.style.left = x + document.body.scrollLeft + "px"
    obj.style.top = y + document.body.scrollTop + "px"
    x = x + step*(xin?1:-1) 
    if (x < L) { xin = true; x = L} 
    if (x > R){ xin = false; x = R} y = y + step*(yin?1:-1) 
    if (y < T) { yin = true; y = T } 
    if (y > B) { yin = false; y = B } 

    var itl= setInterval("float()", delay) 
    obj.onmouseover=function(){clearInterval(itl)} 
    obj.onmouseout=function(){itl=setInterval("float()", delay)} </script>
    </body>
    </html>
      

  8.   

    往上浮动
    你要判断它的方向
    你定义个全局变量
    var curLef = "left";
    var curTop ="top";
    然后在你的自定义函数中
    判断
    如果当前位置pixelLeft小于0,
    curLef = "right";
    否则,大于等于document.body.scrolLeft 
    curLef = "left";向上同理
      

  9.   

    解决了!
    如果使用W3C标准,把document.body替换为document.documentElement就ok了!
    也谢谢各位的帮助!