87,907
社区成员
发帖
与我相关
我的任务
分享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：好久没上来，没分了，各位高手就当帮个忙吧，多谢啦！
...全文
请发表友善的回复…
发表回复
青稞梅子酒 2014-01-20
- 打赏
- 举报
顶上去，让大牛看到！
青稞梅子酒 2014-01-18
- 打赏
- 举报
大哥，刚开始看js，不懂呀，能给个完整的代码么？感激不尽呀！哥！
青稞梅子酒 2014-01-18
- 打赏
- 举报
大哥，刚开始看js，不懂呀，能给个完整的代码么？感激不尽呀！哥！
青稞梅子酒 2014-01-18
- 打赏
- 举报
老大，能不能在我原有代码的基础上稍微改改呀？我还是喜欢那种动态的效果，只要能实现浏览器改变大小也能保持居中效果就好了！
人生难得一只鸡 2014-01-18
- 打赏
- 举报
点击登录看效果
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body { margin: 0; height: 2000px; }
p{margin:0;}
#mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.3; filter:alpha(opacity:30); display:none; }
#box { width: 300px; height: 300px; position: fixed; _position: absolute; left: 0; top: 0; background: #fff; border: 5px solid #333; display:none;}
#box p{height:40px;line-height:40px;background:#ccc;}
#box p a{float:right;width:32px;height:32px;background:url(img/close.png);margin:4px 0;}
#login{position:fixed;_position:absolute;padding:0 20px;font-size:16px;text-decoration:none;border:solid 1px #ccc;background:#03F;color:#fff;height:30px;line-height:30px;}
#login:hover{background:#09F;color:red;}
</style>
<script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>
<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>
<script type="text/javascript">
DD_belatedPNG.fix('#box a');
</script>
<![endif]-->
</head>
<body>
<a href="javascript:;" id="login">登录</a>
<div id="mask"></div>
<div id="box">
<p><a href="javascript:;"></a></p>
</div>
</body>
</html>
<script>
var oMask = document.getElementById('mask');
var oBox = document.getElementById('box');
var oClose=oBox.getElementsByTagName('a')[0];
var oLogin=document.getElementById('login');
var iH = Math.max(view().h,offsetH(),scrollH());
oMask.style.height = iH + 'px';
window.onload = function(){
fnAdjust();
oLogin.onclick=function()
{
show();
fnAdjust();
}
oClose.onclick=function()
{
hide();
}
};
function fnAdjust()
{
var iLeft = ( view().w - oBox.offsetWidth ) / 2;
var iTop = ( view().h - oBox.offsetHeight ) / 2;
var iLoginTop=20;
if( isIe6() )
{
iTop += scrollY();
iLoginTop+=scrollY();
}
oBox.style.left = iLeft + 'px';
oBox.style.top = iTop + 'px';
oLogin.style.right = '20px';
oLogin.style.top = iLoginTop + 'px';
}
function show()
{
oBox.style.display='block';
oMask.style.display='block';
}
function hide()
{
oBox.style.display='none';
oMask.style.display='none';
}
window.onresize = window.onscroll=function()
{
fnAdjust();
}
/*
clientHeight:
offsetHeight:
scrollHeight:
*/
function scrollY(){
return document.body.scrollTop || document.documentElement.scrollTop;
}
function view(){
return {
w : document.documentElement.clientWidth,
h : document.documentElement.clientHeight
};
}
function offsetH(){
return document.body.offsetHeight;
}
function scrollH(){
return document.body.scrollHeight;
}
function isIe6(){
var str = window.navigator.userAgent.toLowerCase();
if( str.indexOf('msie 6') != -1)return true;
return false;
}
</script>
泡泡鱼_ 2014-01-17
- 打赏
- 举报
绑定onresize,参考:http://bbs.csdn.net/topics/390687367
张运领 2014-01-17
- 打赏
- 举报
#select{
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
background:#aaa;
}
