jquery와 javascript (net.magazine에 게시 된 코드)를 사용하여 확대/축소 효과를 만드는 중입니다. 하지만 다음 단계에서이 웹을 다른 장치 (미디어 쿼리 .etc 사용)로 조정하려고합니다. 메신저 창 크기 (내 랩톱 화면 크기는 1024 x 768입니다.) 및 창 및 문서 너비/높이 얻을 동일한 결과 = 737x402 메신저! 왜? scale onload가 전체 화면이 아니기 때문에 입니까?창 너비 및 창 크기 조정을 재설정하는 방법은 무엇입니까?
<div id=wrap>
<div id=container>
<div id=content>
<div class=section id=first ></div>
<div class=section id=second ></div>
</div>
</div>
</div>
<div id=scroller ></div>
CSS를
body{
margin: 0;
padding: 0;
}
#wrap {
position: fixed;
width: 100%;
}
#scroller {
height: 1500px;
}
#container {
position: relative;
top:-57px;
margin:0 auto;
width: 1070px;
height: 665px;
}
#content {
height: 665px;
position: absolute;
width: 100%;
}
#front-first {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
background: url(images/pic1.jpg) no-repeat;
background-size:70%;
position: absolute;
z-index:20;
display: block;
width: 1070px;
height: 665px;
margin: 0 auto;
}
#front-second {
-webkit-transform: scale(0.3333);
-moz-transform: scale(0.3333);
-o-transform: scale(0.3333);
transform: scale(0.3333);
background: url(images/pic2.jpg) no-repeat;
background-size:70%;
position: absolute;
z-index:20;
display: block;
width: 1070px;
height: 665px;
margin: 0 auto;
}
<script>
$(document).ready(function(){
browserWindowheight = $(window).height();
alert(browserWindowheight);
browserWindowwidth = $(window).width();
alert(browserWindowwidth);
function Zoomer(content) {
this.content = content;
this.scrolled = 0;
this.levels = 4;
this.docHeight = document.documentElement.offsetHeight;
// bind Zoomer to scroll event
window.addEventListener('scroll', this, false);
}
Zoomer.prototype.handleEvent = function(event) {
if(this[event.type]) {
this[event.type](event);
}
};
Zoomer.prototype.scroll = function(event) {
this.scrolled = window.scrollY/(this.docHeight - window.innerHeight);
};
Zoomer.prototype.scroll = function(event) {
this.scrolled = window.scrollY/(this.docHeight - window.innerHeight);
var scale = Math.pow(3, this.scrolled * this.levels), transformValue = 'scale(' + scale + ')';
this.content.style.WebkitTransform = transformValue;
this.content.style.MozTransform = transformValue;
this.content.style.OTransform = transformValue;
this.content.style.transform = transformValue;
};
function init() {
var content = document.getElementById('content'),
// init Zoomer constructor
ZUI = new Zoomer(content);
}
window.addEventListener('DOMContentLoaded', init, false);
});
<script>
</html>
감사합니다 :)하지만 난 여전히 740X400 해달라고 같은 결과를 얻을 이유 – tali