浮动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 出现的问题
...全文
355 31 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
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)

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧