JAvascriptとCSS復習(三)

まず、カーソル位置変数x、yは一般的にマウスイベント(mousemoveやmousedownなど)によって取得されるため、ページ全体に対するカーソルの位置を取得する方法を見てみましょう.次の2つの共通関数は、ページ全体に対するカーソルの現在の位置を取得するために使用されます.

   //          
  
function getX(e) { 
  
//        
  
e = e || window.event; 
  
//    IE      ,   IE    
  
return e.pageX || e.clientX + document.body.scrollLeft; 
  
} 
  
 
  
//          
  
function getY(e) { 
  
//        
  
e = e || window.event; 
  
//    IE      ,   IE    
  
return e.pageY || e.clientY + document.body.scrollTop; 
  
} 
  
 
 

FFにおけるe.pageXは、スクロールバーのスクロール距離を含むページ全体のX座標であり、IEにおけるe.clientXは、現在ユーザの前に表示するビューに表示されているX座標である、documentを加えている.body.scrollLeft(横スクロールバーの距離)こそ完全なX座標位置です.
次のコンセプトはビューポート(viewport)で、ブラウザのスクロールバー内のすべてのものと見なすことができます.ビューポートには、ビューポートウィンドウ、ページ、スクロールバーなどのコンポーネントも含まれます.
ページのサイズを取得するには、次の手順に従います.

   //       (            ) 
  
function pageHeight() { 
  
return document.body.scrollHeight; 
  
} 
  
//        
  
function pageWidth() { 
  
return document.body.scrollWidht; 
  
} 
  
 
 

その中のscrollHeightとscrollWidth(クリックして参照)は、現在見られているサイズだけでなく、要素の潜在的な幅と高さを詳細に説明しています.
次に、スクロールバーの位置、すなわちビューポートの先端からのページの距離を取得します.

   //               
  
function scrollX() { 
  
//      ，  IE6/7       
  
var de = document.documentElement; 
  
//       pageXOffset  ,     
  
return self.pageXOffset || 
  
//  ，                
  
(de && de.scrollLeft) || 
  
//  ，    body           
  
document.body.scrollLeft; 
  
} 
  
 
  
//               
  
function scrollY() { 
  
//      ，  IE6/7       
  
var de = document.documentElement; 
  
//       pageYOffset  ，     
  
return self.pageYOffset || 
  
//  ，                
  
(de && de.scrollTop) || 
  
//  ，    body           
  
document.body.scrollTop; 
  
} 
  
 
 

スクロールバーを移動する方法を見てみましょう.Windowsオブジェクトのプロパティとして存在するscrollToメソッドを使用します.xとyのオフセット量という2つのパラメータがあり、ビューポートの指定された位置にスクロールできます.2つの例です.

   //             ，      
  
window.scrollTo(0,0) 
  
 
  
//           ，      
  
window.scrollTo(0, pageY(document.getElementById('content'))); 
  
 
 

pageY関数に慣れていない場合は、ドキュメント全体の要素の位置を取得するために、返信の下で、もう一度与えて、自分も強固にすることができます.

   //     Y   
  
function pageY(elem) { 
  
//            
  
return elem.offsetParent ? 
  
//              ，                
  
elem.offsetTop + pageY(elem.offsetParent): 
  
//  ，         
  
elem.offsetTop; 
  
} 
  
 
 

次に、ビューポート(viewport)のサイズを取得する方法を学び、ビューポートのサイズを取得すると、ユーザーが現在見ることができる内容がどれだけあるかを深く理解することができます.

   //        
  
function windowHeight() { 
  
//      ,  IE6/7       
  
var de = document.documentElement; 
  
//       innerHeight  ,     
  
return self.innerHeight || 
  
//  ,          
  
(de && de.clientHeight) || 
  
//  ,    body      
  
document.body.clientHeight; 
  
} 
  
 
  
//        
  
function windowWidth() { 
  
//      ,  IE6/7       
  
var de = document.documentElement; 
  
//       innerWidth  ,     
  
return self.innerWidth || 
  
//  ,          
  
(de && de.clientWidth) || 
  
//  ,    body      
  
document.body.clientWidth; 
  
} 
  
 
 

innerHeight、clientHeightなどの属性に疑問があるかもしれませんが、直接クリックすると、Mozilla Developer centerで説明されています.
最後に興味深い効果として、現在webフロントエンドでも流行している--「ドラッグ」は、著者が具体的な実現を与えず、良いjsライブラリ、dom-dragを引用している.jsは、上級者のソースコードを学ぶことができ、同時にいくつかの流行のjsライブラリを紹介し、jqueryもその中にあります.はいjavascriptとcssの復習はここまで来て、どんな問題があって伝言の討論を歓迎します.