浮动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 出现的问题
...全文
335 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
  • 打赏
  • 举报
回复
<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>
sohighthesky 2010-01-22
  • 打赏
  • 举报
回复
服务器调试下,看有没执行到fixfun里面去啊
jianshao810 2010-01-22
  • 打赏
  • 举报
回复
window.onscroll = function() {
fixeddiv.className = fixeddiv.className;
};

ie6的时候加上这个就可以了,onresize也有用,试下看。
那就是跟没写是一样的吗?
zhangshaolongjj 2010-01-22
  • 打赏
  • 举报
回复
up
草根醉秋意 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)
相关推荐
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2010-01-22 01:37
社区公告
暂无公告