2012-07-30 4 views
0

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>   

답변

0

나는 당신의 질문에 대답하는 방법을 몰라,하지만 난 그것을 구글과 내가 이걸 발견 : http://www.javascripter.net/faq/browserw.htm

는 희망이 도움이! =)

+0

감사합니다 :)하지만 난 여전히 740X400 해달라고 같은 결과를 얻을 이유 – tali

0

사용 JS :

screen.width; 
screen.height; 

이쪽 * 화면 크기가 아니라 브라우저 크기를 감지

var winWidth = screen.width; 
var winWidth = screen.height; 
+0

하이 알고 고마워,하지만 다시 1204 대신에 같은 결과를 얻는다. – tali