您的位置：首页 > 运维架构

pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y

2015-12-23 23:01 615 查看

event.pageX　　get mouse position

　　Description: The mouse position relative to the left edge of the document.

Example

<script>
$(document).on( "mousemove", function( event ) {
console.log( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});
</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)

<script>
var p = $(element);
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
</script>

Example(set)

<script>
// the parameter must be PlainObject
var coord = {top: 50, left: 100};
$(element).offset(coord);
</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

<script>
var p = $(element);
var position = p.position();
console.log( "left: " + position.left + ", top: " + position.top );
</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)

<script>
var p = $(element);
console.log( "scrollTop:" + p.scrollTop() );
</script>

Example(set)

<script>
var topValue = 500;
$(element).scrollTop(topValue);
</script>

相关：.scrollLeft()

The difference between screenX/Y, clientX/Y and pageX/Y

pageX/Y gives the coordinates relative to the

<html>

element in CSS pixels.

clientX/Y gives the coordinates relative to the

viewport

in CSS pixels.

screenX/Y gives the coordinates relative to the

screen

in device pixels.

Example

<script>
document.addEventListener('click', function(e) {
console.log(
'page: ' + e.pageX + ',' + e.pageY,
'client: ' + e.clientX + ',' + e.clientY,
'screen: ' + e.screenX + ',' + e.screenY)
});
</script>

A picture explaining the difference between

pageY

and

clientY

jQuery Scroll to bottom of page/iframe

<script>
$('html, body').animate({
scrollTop: $(document).height()-$(window).height()},
2000
);
</script>

Composite example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Demo</title>
</head>
<body style="height:1000px;">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<div id="A" style="left:100px;"> Default    <br /> mouse<br/>position </div>
<div id="B" style="left:300px;"> offset()   <br /> mouse<br/>position </div>
<div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>
<div id="D" style="left:700px;"> client     <br /> mouse<br/>position </div>
</body>
<style>
#A,#B,#C,#D {
width: 100px;
height: 100px;
cursor: pointer;
background: #2f2f2f;
position: absolute;
top: 50px;
color: #fff;
font: bold 15px Arial;
}
</style>
<script>
$(document).ready(function (e) {
// pageX
$('#A').click(function (e) {
console.log(e.pageX + ' , ' + e.pageY);
});
// offset()
$('#B').click(function (e) {
var posX = $(this).offset().left,
posY = $(this).offset().top;
console.log((e.pageX - posX) + ' , ' + (e.pageY - posY));
});
// position
$('#C').click(function (e) {
var posX = $(this).position().left,
posY = $(this).position().top;
console.log((e.pageX - posX) + ' , ' + (e.pageY - posY));
});
// client offset scroll
$('#D').click(function (e) {
var offset_t = $(this).offset().top - $(window).scrollTop();
var offset_l = $(this).offset().left - $(window).scrollLeft();
var left = Math.round( (e.clientX - offset_l) );
var top = Math.round( (e.clientY - offset_t) );
console.log("Left: " + offset_t + " Top: " + offset_l);
});
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航