Mobile2011. 12. 15. 14:36

JS와 jQuery의 window,document 위치/크기관련 프로퍼티 비교

내용 :
- JS와 jQuery의 window,document 위치/크기관련된 프로퍼티를 비교 해봤습니다.


소스 :
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Untitled Document</title>
  6.     <style>
  7.         body
  8.         {
  9.             margin:0;
  10.             padding:0;
  11.         }
  12.        
  13.         #main
  14.         {
  15.             border:1px dotted #ff0000;
  16.             width:500px;
  17.             margin:50px;
  18.         }
  19.         #rect
  20.         {          
  21.             border:10px solid #ff0000;         
  22.             position:fixed;
  23.             left:120px;
  24.             top:100px;
  25.         }
  26.        
  27.     </style>
  28.        
  29.       <script  type="text/javascript"  
  30.     src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
  31.     </script>
  32.  
  33.     <script>
  34.     //http://www.w3.org/TR/cssom-view/#the-screen-interface
  35.     //http://www.quirksmode.org/dom/w3c_cssom.html
  36.     //http://debugjung.tistory.com/292
  37.     $(function()
  38.       {
  39.         var rect;
  40.         var main;
  41.         var nSW=5;
  42.        
  43.         rect        =$("#rect");
  44.         main        =$("#main");
  45.        
  46.         showInfo();
  47.        
  48.         createData();
  49.         startMove();
  50.        
  51.         function createData()
  52.         {
  53.             var strInfo="";
  54.             for(var i=0;i<100;i++)
  55.             {
  56.                 strInfo+=i+"<br>";
  57.             }
  58.            
  59.             main.html(strInfo);
  60.         }
  61.        
  62.         function showInfo()
  63.         {
  64.             var         strInfo="";
  65.             strInfo     ="$(window).width(), window.innerWidth = "+window.innerWidth+"<br>";
  66.             strInfo     +="$(window).height(), window.innerHeigh = "+window.innerHeight+"<br>";
  67.             strInfo     +="window.outerWidth = "+window.outerWidth+"<br>";
  68.             strInfo     +="window.outerHeight = "+window.outerHeight+"<br>";
  69.             strInfo     +="window.pageXOffset = "+window.pageXOffset+"<br>";
  70.             strInfo     +="window.pageYOffset = "+window.pageYOffset+"<br>";
  71.             strInfo     +="window.screenLeft = "+window.screenLeft+"<br>";
  72.             strInfo     +="window.screenTop = "+window.screenTop+"<br>";
  73.             strInfo     +="window.screenX = "+window.screenX+"<br>";
  74.             strInfo     +="window.screenY = "+window.screenY+"<br>";
  75.  
  76.            
  77.             strInfo     +="$(document).width(), document.body.scrollWidth = "+$(document).width()+"<br>";
  78.             strInfo     +="$(document).height(), document.body.scrollHeight = "+$(document).height()+"<br>";
  79.        
  80.             rect.html(strInfo);
  81.         }
  82.        
  83.         function on_Change()
  84.         {
  85.             showInfo();
  86.         }
  87.        
  88.        
  89.         function startMove()
  90.         {
  91.             setInterval(moveX, 20);
  92.         }
  93.        
  94.         function moveX()
  95.         {
  96.             autoScroll();
  97.             showInfo();    
  98.         }
  99.    
  100.         function autoScroll()
  101.         {
  102.             var nY      = window.pageYOffset;
  103.             var nMaxTop = $(document).height()-window.innerHeight;
  104.            
  105.             if(nY+nSW>nMaxTop)
  106.             {
  107.                 nSW     =-5;
  108.             }
  109.            
  110.             if(nY+nSW<0)
  111.             {
  112.                 nSW     =5;
  113.             }
  114.            
  115.             nY+=nSW;
  116.             window.scrollTo(0,nY);
  117.         }
  118.        
  119.       });
  120.     </script>
  121. </head>
  122.  
  123. <body>
  124.     <div id="main">            
  125.     </div>
  126.     <div id="rect">                  
  127.     </div>
  128. </body>
  129. </html>
저작자표시

'Mobile' 카테고리의 다른 글

모바일웹의 모든 것  (0) 2011.12.28
아이폰용 모바일웹 제작 팁  (0) 2011.12.15
이동 태그 모음  (0) 2011.12.15
Posted by iWithJoy

티스토리툴바