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

2015-03-18 11:24:59 201 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

drm 之modes #define _GNU_SOURCE #include <errno.h> #include <fcntl.h> #include <stdbool.h> #include <stdint.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <sys/mman.h> #include <time.h&... 阅读详情



  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>