求大神帮忙找问题, 我想让div居中,搞了半天就是实现不了

[kis龍]

  var runEnd,runArr=['#main1','#main2','#main3','#main4'];
// 页面动态效果初始化
	runEnd=function(){
		var id,type='',mObj,list,parW,parH,w,h,scrollTop ,mScrollTop;
		//runArr=runArr.distinct();  // 数组去除重复值
		for(var ii=runArr.length;ii>0;--ii){
			id=runArr[ii-1];
			scrollTop = $(window).scrollTop();
			mScrollTop= $(id).offset().top;
			mH        = $(window).height();
			if( (0 < mScrollTop-scrollTop || scrollTop -mScrollTop < mH) ){   // 不知道这里为什么一直不对, 调试半天就是不能跳过
				continue;
			}
			type=id.split('#').join('').split('-').join('_');
			switch( type){
				case 'main1':
				//	break;
				case 'main2':
					//break;
				case 'main3': //break;
				case 'main4':
					list = $(id).find('.more .t');
					mObj = list.parent();
					parW = mObj.width();parH = mObj.height();
					for ( var i=0; i< list.length;i++){
						w = (parW- list.eq(i).width())/2;
						h = (parH- list.eq(i).height())/2;
						list.eq(i).css({left:w,top:h});
					}
					//runArr.splice(ii-1,1);  // 删除数组,  在别的位置有添加,这里没有写
					break;
				default:
					break;
			}

		}
		//console.log('run',runArr)
		setTimeout(runEnd,250);
	};
	setTimeout(runEnd,250);
//  让 .more .t 居中,在div正中间, 有一个div层挡住这个, 这里没有写,
// 代码问题,  屏幕上面的可以居中显示, 屏幕下面的就不能居中了, 下面的怎么才能居中呢?
//  屏幕中可以看见的不用动, 看不到的居中显示就可以了

js 代码

<!doctype html>
<html>
<head>
<style>
html,body{height:100%;border:0;margin:0}
.main{width:100%;height:100%}
.main1{background-color:red}
.main2{background-color:blue}
.main3{background-color:#0F0}
.main4{background-color:#F0F}
.main .more{position:relative;width:1000px;height:100%;border:1px solid #9C6;margin:-1px auto;}
.main .more .t{position:absolute;left:0; width:100px;height:100px;}
.main .more .t1{top:10%;left:10px;background-color:#33F}
.main .more .t2{top:20%;left:20px;background-color:#C69}
.main .more .t3{top:30%;left:30px;background-color:#CF3}
.main .more .t4{top:40%;left:40px;background-color:#600}
.main .more .t5{top:50%;left:50px;background-color:#04F}
</style>

<!-- 插入 上面 js, 和jquery 代码就能显示 -->
</head>
<body>
<br><br><br><br>
<div class="main main1" id="main1">
	<div class="more">
		<div class="t t1"></div>
		<div class="t t2"></div>
		<div class="t t3"></div>
		<div class="t t4"></div>
		<div class="t t5"></div>
	</div>
</div>
<div class="main main2" id="main2">
	<div class="more">
		<div class="t t1"></div>
		<div class="t t2"></div>
		<div class="t t3"></div>
		<div class="t t4"></div>
		<div class="t t5"></div>
	</div>
</div>
<div class="main main3" id="main3">
	<div class="more">
		<div class="t t1"></div>
		<div class="t t2"></div>
		<div class="t t3"></div>
		<div class="t t4"></div>
		<div class="t t5"></div>
	</div>
</div>
<div class="main main4" id="main4">
	<div class="more">
		<div class="t t1"></div>
		<div class="t t2"></div>
		<div class="t t3"></div>
		<div class="t t4"></div>
		<div class="t t5"></div>
	</div>
</div>



</body>
</html>

[highnewrain]

if( (0 < mScrollTop-scrollTop /*|| scrollTop -mScrollTop < mH*/)){   // 不知道这里为什么一直不对, 调试半天就是不能跳过
				continue;
			}

打开调式窗口的时候，原来浏览器窗口也会变化，即影响到每次获取的mH值， if( (0 < mScrollTop-scrollTop || scrollTop -mScrollTop < mH) 即这个判断可能始终未真，所以你调试时跳不过去

[天际的海浪]

scrollTop = $(window).scrollTop(); mScrollTop= $(id).offset().top; mH = $(window).height(); dH = $(id).height(); if( scrollTop<mScrollTop+dH && scrollTop>mScrollTop-mH ){ // 不知道这里为什么一直不对, 调试半天就是不能跳过 continue; }

[kis龍]

引用 2 楼 u010005508 的回复:

if( (0 < mScrollTop-scrollTop /*|| scrollTop -mScrollTop < mH*/)){   // 不知道这里为什么一直不对, 调试半天就是不能跳过
				continue;
			}

打开调式窗口的时候，原来浏览器窗口也会变化，即影响到每次获取的mH值， if( (0 < mScrollTop-scrollTop || scrollTop -mScrollTop < mH) 即这个判断可能始终未真，所以你调试时跳不过去

不是的, mH是 调用滚动效果的时候获取的, 每200毫秒, 重新读取一次 mh