16/8/23-jquery fully graphical scrollleft,scrollwidth,clientwidth,offsetwidth get relative paths, scrolling pictures

Reference Address: http://www.cnblogs.com/mguo/archive/2013/03/19/2969657.html

ScrollLeft: Sets or gets the distance between the left edge of the object and the leftmost of the currently visible content in the window
ScrollTop: Sets or gets the distance between the top of the object and the top of the visible content in the window
ScrollWidth: Gets the scrolling width of the object
Offsetheight: Gets the height of the object relative to the layout or parent coordinates specified by the parent coordinate OffsetParent property
Offsetleft: Gets the calculated left position of the object relative to the layout or the parent coordinate specified by the OffsetParent property
OffsetTop: Gets the computed top position of the object relative to the layout or the parent coordinate specified by the OffsetTop property
Event.clientx horizontal coordinates of relative documents
Event.clienty vertical coordinates of relative documents
Event.offsetx horizontal coordinates relative to the container
Event.offsety the vertical coordinate of the relative container
Document.documentElement.scrollTop The vertical scrolling value
Event.clientx+document.documentelement.scrolltop horizontal coordinates of relative documents + amount of vertical scrolling
The above mainly refers to IE, Firefox differences are as follows:
IE6.0, ff1.06+:
clientwidth = width + padding
clientheight = height + padding
offsetwidth = width + padding + border
offsetheight = height + padding + border
ie5.0/5.5:
ClientWidth = Width-border
ClientHeight = Height-border
offsetwidth = width
offsetheight = height (need to mention: Margin attribute in CSS, regardless of clientwidth, offsetwidth, ClientHeight, offsetheight)

Gets the location property of an element that can be

• Htmlelement.offsetleft
• Htmlelement.offsettop

However, the values stored by these two properties are not the absolute position of the element relative to the entire browser canvas, but rather the relative position relative to the position of the parent element, which means that the values are computed as a (0,0) point in the upper-left corner of their parent element.  So we're going to get her absolute position, then we have to get the position of his parent element in turn, then get the Offersetleft and offersettop of the parent element of its parent element, always recursively to the browser's entire canvas at a distance, for example ( Be sure to pay attention to the path relative to the parent tag! ）

/* Gets the ordinate of the element */
function GetTop (e) {
var offset=e.offsettop;
if (e.offsetparent!=null) {
Offset+=gettop (e.offsetparent);
}
return offset;
}
/* Get the horizontal axis of the element */
function GetLeft (e) {
var offset=e.offsetleft;
if (e.offsetparent!=null) {
Offset+=getleft (e.offsetparent);
}
return offset;
}

Gets the absolute position of the element, which is nothing more than the element from the left side of the browser (top), we can change a little bit to get a method

function Getelempos (obj) {
var pos = {"Top": 0, "left": 0};
if (obj.offsetparent) {
while (obj.offsetparent) {
Pos.top + = Obj.offsettop;
Pos.left + = Obj.offsetleft;
obj = obj.offsetparent;
}
}else if (obj.x) {
Pos.left + = obj.x;
}else if (obj.x) {
Pos.top + = OBJ.Y;
}
return {x:pos.left, y:pos.top};}

16/8/23-jquery fully graphical scrollleft,scrollwidth,clientwidth,offsetwidth get relative paths, scrolling pictures