pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y
event.pageX get?mouse position
Description: The mouse position relative to the left edge of the document.
Example
1 <script> 2 $(document).on( "mousemove", function( event ) { 3 console.log( "pageX: " + event.pageX + ", pageY: " + event.pageY ); 4 }); 5 </script>.offset() get?offset position?of an element
Description: Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.
Example(get)
1 <script> 2 var p = $(element); 3 var offset = p.offset(); 4 p.html( "left: " + offset.left + ", top: " + offset.top ); 5 </script>Example(set)
1 <script> 2 // the parameter must be PlainObject 3 var coord = {top: 50, left: 100}; 4 $(element).offset(coord); 5 </script>.position()??? get the relative Position of an element
Description: Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.
Note: this method does not accept any arguments.
Example
1 <script> 2 var p = $(element); 3 var position = p.position(); 4 console.log( "left: " + position.left + ", top: " + position.top ); 5 </script>.scrollTop()
Description: Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.
Example(get)
1 <script> 2 var p = $(element); 3 console.log( "scrollTop:" + p.scrollTop() ); 4 </script>Example(set)
1 <script> 2 var topValue = 500; 3 $(element).scrollTop(topValue); 4 </script>相關：.scrollLeft()
The difference between screenX/Y, clientX/Y and pageX/Y
Example
1 <script> 2 document.addEventListener('click', function(e) { 3 console.log( 4 'page: ' + e.pageX + ',' + e.pageY, 5 'client: ' + e.clientX + ',' + e.clientY, 6 'screen: ' + e.screenX + ',' + e.screenY) 7 }); 8 </script>A picture explaining the difference between pageY and clientY:
?jQuery Scroll to bottom of page/iframe
1 <script> 2 $('html, body').animate({ 3 scrollTop: $(document).height()-$(window).height()}, 4 2000 5 ); 6 </script>Composite?example
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>Demo</title> 7 </head> 8 <body style="height:1000px;"> 9 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 10 <div id="A" style="left:100px;"> Default <br /> mouse<br/>position </div> 11 <div id="B" style="left:300px;"> offset() <br /> mouse<br/>position </div> 12 <div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div> 13 <div id="D" style="left:700px;"> client <br /> mouse<br/>position </div> 14 </body> 15 <style> 16 #A,#B,#C,#D { 17 width: 100px; 18 height: 100px; 19 cursor: pointer; 20 background: #2f2f2f; 21 position: absolute; 22 top: 50px; 23 color: #fff; 24 font: bold 15px Arial; 25 } 26 </style> 27 <script> 28 $(document).ready(function (e) { 29 // pageX 30 $('#A').click(function (e) { 31 console.log(e.pageX + ' , ' + e.pageY); 32 }); 33 // offset() 34 $('#B').click(function (e) { 35 var posX = $(this).offset().left, 36 posY = $(this).offset().top; 37 console.log((e.pageX - posX) + ' , ' + (e.pageY - posY)); 38 }); 39 // position 40 $('#C').click(function (e) { 41 var posX = $(this).position().left, 42 posY = $(this).position().top; 43 console.log((e.pageX - posX) + ' , ' + (e.pageY - posY)); 44 }); 45 // client offset scroll 46 $('#D').click(function (e) { 47 var offset_t = $(this).offset().top - $(window).scrollTop(); 48 var offset_l = $(this).offset().left - $(window).scrollLeft(); 49 var left = Math.round( (e.clientX - offset_l) ); 50 var top = Math.round( (e.clientY - offset_t) ); 51 console.log("Left: " + offset_t + " Top: " + offset_l); 52 }); 53 }); 54 </script> 55 </body> 56 </html>?
轉載于:https://www.cnblogs.com/hzj680539/p/5071607.html
總結
以上是生活随笔為你收集整理的pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： memest函数用法说明（转自Lee.K
- 下一篇： 恢复 root 本地无权限 Acces