日期:2014-05-16  浏览次数:20380 次

js浮动窗口居中显示!求高手帮忙看下代码哪里错了!

<SCRIPT language="JavaScript">
lastScrollY = 0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{/*Netscape stuff*/}

percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("leftDiv").style.top = parseInt(document.getElementById("leftDiv").style.top)+percent+"px";
document.getElementById("rightDiv").style.top = parseInt(document.getElementById("rightDiv").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
}
window.setInterval("heartBeat()",1);

document.writeln("<style type=\"text\/css\">");
document.writeln("#leftDiv,#rightDiv{width:123px;height:100px;position:absolute;}");
document.writeln(".itemFloat{width:100px;height:auto;line-height:5px;POSITION:relative; margin-left:150px; margin-top:86px;}.itemFloa1{width:100px;height:100px; margin-left:150px; margin-top:-100px;POSITION:absolute;left:130px;top:100px;}");
document.writeln("<\/style>");
document.writeln("<div id=\"leftDiv\" style=\"top:140px;right:445px\" style=\"display:none;\">");
document.writeln("<\/div>");
document.writeln("<div id=\"rightDiv\" style=\"top:158px;left:400px;\">");
document.writeln("<div id=\"right1\" class=\"itemFloat\">");
document.writeln("<a href=\"http://baidu.com\" target=\"_blank\"><img border=\"0\" src=\"wee.png\" width=\"311\" height=\"206\" alt=\"点击这里给我发消息\" id=\"w3\" \/><\/a>");
document.writeln("<div class=\"itemFloa1\"><a href=\"javascript:close_right1();\" style=\"display:block;background:#fff;width:30px;height:30px;opacity:0.05;filter:alpha(opacity=5);\" title=\"关闭\"> <\/a><\/div>");
document.writeln("<\/div>");
document.writeln("<\/div>");
</SCRIPT>


如上,现在的代码可以实现浮动居中,但是如何实现在浏览器窗口大小变化的时候同样是居中效果。
ps:好久没上来,没分了,各位高手就当帮个忙吧,多谢啦!

------解决方案--------------------
绑定onresize,参考:http://bbs.csdn.net/topics/390687367
------解决方案--------------------
#select{
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
background:#aaa;
}


如果你只是想要居中,没有必要去计算,利用绝对定位,定位你要居中的那个元素就行了。

------解决方案--------------------
点击登录看效果