화면 가운데
3371 단어 JavaScript
1 js 실현
원리: 창 스크롤 바 스크롤, div 의 위 치 를 계속 조정 합 니 다.
<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<body>
<div style="position: absolute;height: 2000px;border: 1px solid green;"> <div style="margin-top: 400px"> div </div> </div>
<div id="fd" style="height:100px;width:100px;z-index:9999;border:1px solid red">
<br><span id="pos"></span>
</div>
</body>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script language="javascript">
$(function() {
$(window).scroll(function(){
var point = getObjWh1( "fd" );
$('#pos').html('x:'+point.x+',<br>y:'+point.y);
$('#fd').css( { position: "relative" , left: point.x , top:point.y } );
});
});
function getObjWh1(obj){
var point={};
var st=$(document).scrollTop();//
var sl= $(document).scrollLeft();//
var ch=$(window).height();//
var cw=$(window).width();//
var objH=$("#"+obj).height();//
var objW=$("#"+obj).width();//
var objT=Number(st)+(Number(ch)-Number(objH))/2;
var objL=Number(sl)+(Number(cw)-Number(objW))/2;
point.x = objL ;
point.y = objT;
return point;
}
</script>
</html>
2 css + div 구현 div 시종 화면 중간 표시
원리: html 는 외부 용기 로 서 항상 창 크기 이 며 내부 물건 이 경 계 를 초과 하면 숨 깁 니 다.
body 는 내부 용기 로 서 창 크기 이 고 내부 내용 의 높이 가 창 높이 경계 보다 크 면 스크롤 바 가 굴 러 가지 만 전체 창 위 치 는 변 하지 않 습 니 다.
내부 에 움 직 이지 않 는 div 는 창의 위치 에 비해 스크롤 바 가 아무리 굴 러 도 창 이 움 직 이지 않 으 면 이 div 위치 도 변 하지 않 습 니 다.
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <style>
*{
padding:0px; margin:0px;
margin-right:10px;
margin-bottom:10px;
}
html{border:4px solid red}
/*height width 100% */
body,html{height:98%; width:98%; }
html{overflow:hidden;}
body{overflow-y:auto }
.display{ position:absolute;
left:50%; top:50%;
height:300PX; width:500PX;
margin-left:-250PX;
margin-top:-150PX;
border:1PX solid #F00;
}
</style>
</head>
<body style="border:4px solid red">
<DIV style="height:2000PX;"> </DIV>
<DIV style="height:2000PX;"> </DIV>
<DIV style="height:2000PX;"> </DIV>
<div class="display">11111</div>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
