浮动div的问题

Question

function jshFloatBanner(id) {
    this.box = document.getElementById(id);
    if (this.box.style.top) { this.top = true; this.orgTop = this.box.style.posTop; }
    if (this.box.style.bottom) { this.bottom = true; this.orgBottom = this.box.style.posBottom; }
    if (this.box.style.left) { this.left = true; this.orgLeft = this.box.style.posLeft; }
    if (this.box.style.right) { this.right = true; this.orgRight = this.box.style.posRight; }
    this.initBanner();
}jshFloatBanner.prototype =
        {
            ae: function(e, call) {
                if (window.attachEvent) { window.attachEvent("on" + e, call); }
                else if (window.addEventListener) {
                    window.addEventListener(e, call, false);
                }
            },
            isfixed: !window.ActiveXObject || (navigator.userAgent.indexOf("MSIE 6") == -1 && document.compatMode == "CSS1Compat"),  //支持fixed。。ie6以下不支持。其他都支持            fixfun: function() {
                var scrollTop = this.de.scrollTop;
                var scrollLeft = this.de.scrollLeft;
                var winWidth = this.de.clientWidth;
                var winHeight = this.de.clientHeight;
                var offsetHeight = this.box.offsetHeight;
                var offsetWidth = this.box.offsetWidth;
                var x, y;
                if (this.top) {
                    y = scrollTop + this.orgTop;
                    this.box.style.posTop = y;
                }
                else if (this.bottom) {
                    if (winHeight + scrollTop > document.body.scrollHeight + offsetHeight) { return; }
                    y = (scrollTop + winHeight - offsetHeight - this.orgBottom);
                    this.box.style.posTop = y;
                }
                if (this.left) {
                    x = scrollLeft + this.orgLeft;
                    this.box.style.posLeft = x;
                }
                else if (this.right) {
                    if (winWidth + scrollLeft > document.body.scrollWidth + offsetWidth) { return; }
                    x = (scrollLeft + winWidth - offsetWidth - this.orgRight);
                    this.box.style.posLeft = x;
                    this.box.style.posRight = null;
                }
            },            initBanner: function() {
                var o = this;
                if (!o.isfixed) {
                    o.box.style.position = "absolute";
                    o.de = document.documentElement ? document.documentElement : document.body;
                    var timer;
                    o.ae("scroll", function() {
                        clearTimeout(timer);
                        timer = setTimeout(function() { o.fixfun(); }, 60)
                    });
                    o.ae("resize", function() {
                        clearTimeout(timer);
                        timer = setTimeout(function() { o.fixfun(); }, 60)
                    });
                    window.scroll();
                }
            }
        }另外附上测试代码   <div id='div2009_2010' style="position:fixed; bottom: 0; right: 5px; width: 240px;
        z-index: 6000; height: 165px; line-height: 100%;">
        <span onclick='javascript:parentElement.style.display="none";movepeixun=null;' style="width: 55px; font-size:14px;
            right: 0; top: 3px; cursor: pointer; clear: both; line-height: 100%; position: absolute;
            font-weight: bold; color: Yellow;">关闭 X</span>
        <img src='http://www.fpdisplay.com/Subject/2009-2010meeting/rb2.jpg' alt='' style="cursor: pointer;" onclick='window.open("http://www.fpdisplay.com/Subject/2009-2010meeting/default.html");' />
    </div>
  <script type="text/javascript">
      
        var right = new jshFloatBanner("div2009_2010");
    </script>都可以直接复制粘贴的。。
我主要是不会 right：与bottom 的情况是 如何处理
fixfun: function() {
                var scrollTop = this.de.scrollTop;
                var scrollLeft = this.de.scrollLeft;
                var winWidth = this.de.clientWidth;
                var winHeight = this.de.clientHeight;
                var offsetHeight = this.box.offsetHeight;
                var offsetWidth = this.box.offsetWidth;
                var x, y;
                if (this.top) {
                    y = scrollTop + this.orgTop;
                    this.box.style.posTop = y;
                }
                else if (this.bottom) {
                    if (winHeight + scrollTop > document.body.scrollHeight + offsetHeight) { return; }
                    y = (scrollTop + winHeight - offsetHeight - this.orgBottom);
                    this.box.style.posTop = y;
                }
                if (this.left) {
                    x = scrollLeft + this.orgLeft;
                    this.box.style.posLeft = x;
                }
                else if (this.right) {   //这个该如何处理呢？
                    if (winWidth + scrollLeft > document.body.scrollWidth + offsetWidth) { return; }
                    x = (scrollLeft + winWidth - offsetWidth - this.orgRight);
                    this.box.style.posLeft = x;
                    this.box.style.posRight = null;
                }
            },我在本地测试的时候怎样拖，怎样 改变大小 都没事。。但是一放到服务器上 就出问题啦。。
当我 双击 一个本来最大化 窗口 的页面的 时候（双击后变成不是最大化），然后再点击最大化，这时候的图片就不靠右边啦。
位置 就是他原来 双击之后的位置。。不会变回原来那样
(不知道明不明白) 这个 是在ie6 出现的问题

Answer 1

一个浮动的div
传入参数是 top  left right bottom
如果 不是ie6 就用fixed 定位，
如果是ie 6 就用 absolute 定位要实现的效果 是 共用的 固定 层。
由传进去  的 top  left right bottom
自动进行定位。在onscroll  与 onresize  位置都 不变

Answer 2

给个JS判断浏览器是火狐还是IE再看用什么方法定位啊

Answer 3

现在 就是 onresize 的时候 就出问题。
但我在本地调试 是 没事的
   isfixed: !window.ActiveXObject || (navigator.userAgent.indexOf("MSIE 6") == -1 && document.compatMode == "CSS1Compat"),
这个是判断是否ie6 ，只有ie6才附加 onresize 事件

Answer 4

  window.onscroll = function() {
                    fixeddiv.className = fixeddiv.className;
                };ie6的时候加上这个就可以了，onresize也有用，试下看。

Answer 5

  window.onscroll = function() { 
                    fixeddiv.className = fixeddiv.className; 
                }; ie6的时候加上这个就可以了，onresize也有用，试下看。
那就是跟没写是一样的吗？

Answer 6

服务器调试下，看有没执行到fixfun里面去啊

Answer 7

<script>
var fixPosition=function(target,pos) {  
    this.target= this.g(target);  
    this.pos=pos;  
    this.init();//  
};  
  
fixPosition.prototype={  
    isScroll:navigator.userAgent.indexOf("MSIE 6")!=-1 ||(window.ActiveXObject && document.compatMode!="CSS1Compat"),  
    ae:function(e,call) {  
        if(window.addEventListener)  
            window.addEventListener(e,call,false);  
        else  
            window.attachEvent("on"+e,call);  
    },  
    g:function(id) {  
        return typeof(id)=="string"?document.getElementById(id):id;  
    },  
    setPos:function() {//设置位置  
        var de;  
        if(document.compatMode=="CSS1Compat")de=document.documentElement;  
        else de=document.body;  
          
        if(typeof(this.pos)=="string") {//  
            if(!this.isScroll){  
                switch(this.pos.charAt(0)) {  
                    case "l":  
                        this.target.style.left="0px";  
                        break;  
                    case "r":  
                        this.target.style.right="0px";  
                        break;  
                    default:  
                        this.target.style.left=(de.clientWidth-this.target.clientWidth)/2 +"px";   
                        break;  
                }  
                switch(this.pos.charAt(1)) {  
                    case "t":  
                        this.target.style.top="0px";  
                        break;  
                    case "b":  
                        this.target.style.bottom="0px";  
                        break;  
                    default:  
                        this.target.style.top=(de.clientHeight-this.target.clientHeight)/2 +"px";   
                        break;  
                }  
            }else {  
                switch(this.pos.charAt(0)) {  
                    case "l":  
                        this.target.style.left=de.scrollLeft+"px";  
                        break;  
                    case "r":  
                        this.target.style.left=de.scrollLeft+de.clientWidth-this.target.clientWidth +"px";  
                        break;  
                    default:  
                        this.target.style.left=de.scrollLeft+((de.clientWidth-this.target.clientWidth)/2)+"px";  
                        break;  
                }  
                switch(this.pos.charAt(1)) {  
                    case "t":  
                        this.target.style.top=de.scrollTop+"px";  
                        break;  
                    case "b":  
                        this.target.style.top=de.scrollTop+de.clientHeight-this.target.clientHeight+"px";  
                        break;  
                    default:  
                        this.target.style.top=de.scrollTop+((de.clientHeight-this.target.clientHeight)/2)+"px";  
                        break;  
                }  
            }  
        } else {  
            if(!this.isScroll) {  
                for(var p in this.pos)  
                    this.target.style[p]=this.pos[p]+"px";  
            } else {  
                for(var p in this.pos) {  
                    switch(p.toLowerCase()) {  
                        case "left":  
                            this.target.style.left=de.scrollLeft+this.pos[p]+"px";  
                            break;  
                        case "right":  
                            this.target.style.left=de.scrollLeft+de.clientWidth-this.target.clientWidth-this.pos[p]+"px";  
                            break;  
                        case "top":  
                            this.target.style.top=de.scrollTop+this.pos[p]+ "px";  
                            break;  
                        case "bottom":  
                            this.target.style.top=de.scrollTop+de.clientHeight-this.target.clientHeight-this.pos[p]+"px";  
                            break;  
                    }  
                }  
            }  
        }  
    },  
    init:function() {  
        if(!this.pos)  
            throw Error("Invalid arguments [pos].");  
        if(!this.isScroll)  
            this.target.style.position="fixed";  
        else  
            this.target.style.position="absolute";  
        var timer,o=this;  
        this.ae("resize",function() {//支持fixed的浏览器窗体大小改变时也重置位置，防止中间无法居中  
            clearTimeout(timer);  
            timer=setTimeout(function() {  
                o.setPos();  
            },30);  
        });  
        if(this.isScroll) {//滚动  
            this.ae("scroll",function() {                  
                clearTimeout(timer);  
                timer=setTimeout(function() {  
                    o.setPos();  
                },30);  
            });  
        }  
        this.setPos();  
    }  
}
</script><style>
#fix {
border:black solid 1px;
width:240px;
height:165px;
cursor:pointer;
text-align:center;
vertical-align:middle;
line-height:1.8;
z-index:9999;
background-image:url('http://www.fpdisplay.com/Subject/2009-2010meeting/rb2.jpg');
-moz-opacity: 0.85;
opacity: 0.85;
filter:alpha(opacity=85);
    }
</style>
<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1<p>1
<div id="fix">111</div> 
<script>
var fix=document.getElementById("fix");
new fixPosition(fix,{right:0,bottom:50});
</script>

Answer 8

有执行到里面去的。。
window.onscroll = function() { 
                    fixeddiv.className = fixeddiv.className; 
                }; 这个在ie6 窗体不是全屏。然后将滚动条托到最 右边
之后就整个页面就不居中啦，而且那个浮动的div 会到 最 右边去。，。
就是多出了滚动条。
这个要怎样处理

Answer 9

楼主你做都没做吧？我测试了再次验证是可以的
<!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=utf-8" />
    <title>测试页面</title>    <script type="text/javascript" src="../js/jquery.js"></script>    <style type="text/css">
        </style>    <script type="text/javascript">
        var isIE6 = ($.browser.msie && $.browser.version == "6.0");
        $(document).ready(function() {
            if (isIE6) {
                document.getElementById("divFixed").style.position = "absolute";
                window.onscroll = function() {
                    document.getElementById("divFixed").className = document.getElementById("divFixed").className
                }
            }
        });    </script></head>
<body style="height:2000px;">    <script type="text/javascript">
        
    </script>    <div id="divFixed" style="width: 200px; height: 200px; border: 2px solid #ff0000;
        background-color: #993366; position: fixed; bottom: 10px; right: 10px;">
    </div>    <script type="text/javascript">
    </script></body>
</html>

Answer 10

我有做。。
我可以把地址发你看看
http://www.fpdisplay.com
在ie6里你缩小窗口，让他有底部滚动条，然后你托底部滚动到 右边，然后最大化窗口 就可以 看到
问题啦。。
我不是很精通js的

Answer 11

把window.onresize = function(){
 document.getElementById("divFixed").className = document.getElementById("divFixed").className}
添加上去看看

Answer 12

fixfun: function() {
                var scrollTop = this.de.scrollTop;
                var scrollLeft = this.de.scrollLeft;
                var winWidth = this.de.clientWidth;
                var winHeight = this.de.clientHeight;
                var offsetHeight = this.box.offsetHeight;
                var offsetWidth = this.box.offsetWidth;
                //                var x, y;
                //                if (this.top) {
                //                    y = scrollTop + this.orgTop;
                //                    this.box.style.posTop = y;
                //                }
                //                else if (this.bottom) {
                //                    if (winHeight + scrollTop > document.body.scrollHeight + offsetHeight) { return; }
                //                    y = (scrollTop + winHeight - offsetHeight - this.orgBottom);
                //                    this.box.style.posTop = y;
                //                    this.bottom = true;
                //                }
                //                if (this.left) {
                //                    x = scrollLeft + this.orgLeft;
                //                    this.box.style.posLeft = x;
                //                }
                //                else if (this.right) {
                //                    if (winWidth + scrollLeft > document.body.scrollWidth + offsetWidth) { return; }
                //                    x = (scrollLeft + winWidth - offsetWidth - this.orgRight);
                //                    this.box.style.posLeft = x;
                //                    this.right = true;
                //                }
                
                //if (this.right) {
                  //  if (winWidth + scrollLeft > parseInt(document.body.scrollWidth)) { return; }
              //}
                this.box.className = this.box.className;
            },我这样写应该跟 你的 是一样的。。

Answer 13

那知道怎样解决吗？
13楼的 是可以实现，但是没有利用fixed。。

Answer 14

调试 下 可以同时用这个两个属性postion:absoult;_postion:fixed

Answer 15

                    o.ae("scroll", function() {
   o.box.className = o.box.className;
                    });
                    o.ae("resize", function() {
   o.box.style.display="none"
   setTimeout(function() { o.box.style.display=""; }, 10)
                    });先隐藏一下看看

Answer 16

我也用了
调试 下 可以同时用这个两个属性postion:absoult;_postion:fixed
兼容的 position:fixed !important;postion:absoult;回 22楼的，请问隐藏有什么用？

Answer 17

            initBanner: function() {
                var o = this;
                if (!o.isfixed) {
                    o.box.style.position = "absolute";
                    o.de = document.documentElement ? document.documentElement : document.body;
                    var timer;
                    o.ae("scroll", function() {
                        clearTimeout(timer);
                        timer = setTimeout(function() { o.fixfun(); }, 60)
                    });
                    o.ae("resize", function() {
                        clearTimeout(timer);
                        //timer = setTimeout(function() { o.fixfun(); }, 60)
                        o.box.style.display = "none"
                       timer= setTimeout(function() { o.box.style.display = ""; }, 10)                     });
                    // window.scroll();
                }
            }隐藏了 ，可以还是不行。。没什么变化，主要是resize 之后 再 滚动 滚动条 就会 使页面 的宽度 变宽

Answer 18

这与页面的css设计 比如 body html 等元素 的设计有关系吗？

Answer 19

<!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 style="width:1000px; border:1px solid #000;">234</div><script language="javascript">function jshFloatBanner(id) {
    this.box = document.getElementById(id);
    if (this.box.style.top) { this.top = true; this.orgTop = this.box.style.posTop; }
    if (this.box.style.bottom) { this.bottom = true; this.orgBottom = this.box.style.posBottom; }
    if (this.box.style.left) { this.left = true; this.orgLeft = this.box.style.posLeft; }
    if (this.box.style.right) { this.right = true; this.orgRight = this.box.style.posRight; }
    this.initBanner();
}jshFloatBanner.prototype =
        {
            ae: function(e, call) {
                if (window.attachEvent) { window.attachEvent("on" + e, call); }
                else if (window.addEventListener) {
                    window.addEventListener(e, call, false);
                }
            },
            isfixed: !window.ActiveXObject || (navigator.userAgent.indexOf("MSIE 6") == -1 && document.compatMode == "CSS1Compat"),  //支持fixed。。ie6以下不支持。其他都支持

            initBanner: function() {
                var o = this;
                if (!o.isfixed) {
                    o.box.style.position = "absolute";
                    o.de = document.documentElement ? document.documentElement : document.body;
                    var timer;
                    o.ae("scroll", function() {
                        clearTimeout(timer);
                        timer = setTimeout(function() { o.box.className = o.box.className; }, 60)
                    });
                    o.ae("resize", function() {
                        o.box.style.display = "none"
setTimeout(function() { o.box.style.display = ""; }, 10) 
                    });                }
            }
        }</script> <div id='div2009_2010' style="position:fixed; bottom: 0; right: 5px; width: 240px;
        z-index: 6000; height: 165px; line-height: 100%;">
        <span onclick='javascript:parentElement.style.display="none";movepeixun=null;' style="width: 55px; font-size:14px;
            right: 0; top: 3px; cursor: pointer; clear: both; line-height: 100%; position: absolute;
            font-weight: bold; color: Yellow;">关闭 X</span>
        <img src='http://www.fpdisplay.com/Subject/2009-2010meeting/rb2.jpg' alt='' style="cursor: pointer;" onclick='window.open("http://www.fpdisplay.com/Subject/2009-2010meeting/default.html");' />
    </div>
  <script type="text/javascript">
      
        var right = new jshFloatBanner("div2009_2010");
    </script></body>
</html>
试试

Answer 20

非常感谢你耐心的回答啊。。
但是我原原本本的复制下去，不过，效果都是一样。
在ie6的时候 缩小窗口 拖动水平滚动条，之后全屏。图片 是在右下角
但是整个页面 变宽啦。。
http://www.fpdisplay.com
这个网页最下面就可以看到 这个效果。。看来周末 要拼命研究啦

Answer 21

最多分的就是答案。但他 好像是引用sky的。所以sky 也有20分