텍스트가있는 수백 개의 Div가 포함 된 페이지가 있습니다. 모든 div는 절대 좌표로 배치됩니다. 페이지가 매우 크고 일반 모니터에 표시 할 수 없습니다. pageload 페이지가 축소되어 전체 페이지를 볼 수 있도록 텍스트가 너무 작아서 읽을 수 없기를 바랍니다. 그런 다음 시간 초과 후 ID 값을 기준으로 지정된 div 방향으로 확대해야합니다.자바 스크립트로 div로 확대
이 작업을 수행 할 수 있습니까?
document.body.style.zoom=0.5;this.blur();
하지만 난 지정된 항목에 어떻게 확대 않습니다
나는 내가 밖으로 inital 줌이 사용할 수 이해?
편집 : 충분히 명확하지 않았습니다. 한 번 축소되었습니다. 확대/축소 동작을 사용하여 확대/축소하려는 경우 사용자가 확대/축소 된 div의 위치를 알 수 있습니다. 감사!
이 귀하의 요청에 대해 작동 할 수 ...
$('.myDiv').click(function() {
var top = '100px';
var left = '50px';
$('body').animate({zoom: '100%', scrollTop: top, scrollLeft: left});
});body {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
zoom: 100%;
}
body.out {
zoom: 50%;
}
.myDiv {
width: 200px;
height: 300px;
float: left;
background-color: red;
border: 1px solid black;
}
html,
body {
width: 100%;
height: 100%;
background-color: yellow;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body class="out">
<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>
</body>
</html>
미안 해요, 난 충분히 명확하지 않았을 수도, 나는 죄송합니다. 주요 질문에 편집을 추가했습니다. – sharkyenergy
@sharkyenergy 내 업데이트 된 답변을 확인하십시오. –
줌 파트가 작동하지만 스크롤 파트가 작동하지 않습니다. 그것은 항상 상단 왼쪽 구석에 줌 .. – sharkyenergy