浮动div的问题

jianshao810 2010-01-22 01:37:51



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 出现的问题

...全文

334 31 打赏收藏举报

写回复

31 条回复

切换为时间正序

请发表友善的回复…

发表回复

miaruk 2010-02-03

打赏
举报

好有难度啊,,,,膜拜

jianshao810 2010-01-23

打赏
举报

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

jianshao810 2010-01-22

打赏
举报

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

草根醉秋意 2010-01-22

打赏
举报

确实有这个问题，，

jianshao810 2010-01-22

打赏
举报



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;

            },

我这样写应该跟你的是一样的。。

草根醉秋意 2010-01-22

打赏
举报

把window.onresize = function(){
document.getElementById("divFixed").className = document.getElementById("divFixed").className

}
添加上去看看

jianshao810 2010-01-22

打赏
举报

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

草根醉秋意 2010-01-22

打赏
举报

[Quote=引用 11 楼 jianshao810 的回复:]
window.onscroll = function() {
fixeddiv.className = fixeddiv.className;
};

ie6的时候加上这个就可以了，onresize也有用，试下看。
那就是跟没写是一样的吗？
[/Quote]
楼主你做都没做吧？我测试了再次验证是可以的



<!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>

jianshao810 2010-01-22

打赏
举报

有执行到里面去的。。
window.onscroll = function() {
fixeddiv.className = fixeddiv.className;
};

这个在ie6 窗体不是全屏。然后将滚动条托到最右边
之后就整个页面就不居中啦，而且那个浮动的div 会到最右边去。，。
就是多出了滚动条。
这个要怎样处理

veardn 2010-01-22

打赏
举报

sohighthesky 2010-01-22

打赏
举报

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

jianshao810 2010-01-22

打赏
举报

window.onscroll = function() {
fixeddiv.className = fixeddiv.className;
};

ie6的时候加上这个就可以了，onresize也有用，试下看。
那就是跟没写是一样的吗？

zhangshaolongjj 2010-01-22

打赏
举报

草根醉秋意 2010-01-22

打赏
举报

window.onscroll = function() {
fixeddiv.className = fixeddiv.className;
};

ie6的时候加上这个就可以了，onresize也有用，试下看。

qq373591361 2010-01-22

打赏
举报

[Quote=引用 2 楼 kingwolf_javascript 的回复:]
楼主的头像太吸引人了！！！
大家看到这个头像就一定会帮助你的，可惜我不会这个问题啊。
不知道是不是楼主本人呢？
[/Quote]
我知道，是台湾的无双妹妹

jianshao810 2010-01-22

打赏
举报

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

Y_2716 2010-01-22

打赏
举报

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

jianshao810 2010-01-22

打赏
举报

一个浮动的div
传入参数是 top left right bottom
如果不是ie6 就用fixed 定位，
如果是ie 6 就用 absolute 定位

要实现的效果是共用的固定层。
由传进去的 top left right bottom
自动进行定位。

在onscroll 与 onresize 位置都不变

KK3K2005 2010-01-22

打赏
举报

直接说你要实现的需求吧

jianshao810 2010-01-22

打赏
举报

呵呵。。这个女的真那么吸引吗？

加载更多回复（11）