offsetTop、offsetLeft、offsetWidth、offsetHeight
offsetTop --- 当前对象到其上级层顶部的间隔.
offsetLeft --- 当前对象到其上级层左边的间隔.
offsetWidth --- 当前对象的宽度
offsetHeight --- 当前对象的高度
offsetParent --- 当前对象的上级层对象.
如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题.
利用这个属性，可以得到当前对象在不同大小的页面中的绝对位置．
// 获取元素的纵坐标（相对于窗口）
function getTop(e) {
var offset = e.offsetTop;
if (e.offsetParent != null) offset += getTop(e.offsetParent);
return offset;
}
scrollLeft、scrollTop
scrollLeft
对象的最左边到对象在当前窗口显示的范围内的左边的距离．
即是在出现了横向滚动条的情况下，滚动条拉动的距离．
scrollTop
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．
即是在出现了纵向滚动条的情况下，滚动条拉动的距离．
javascript中制作滚动代码的常用属性
-
网页可见区域宽： document.body.clientWidth;
-
网页可见区域高： document.body.clientHeight;
-
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
-
网页可见区域高： document.body.offsetHeight (包括边线的宽);
-
网页正文全文宽： document.body.scrollWidth;
-
网页正文全文高： document.body.scrollHeight;
-
网页被卷去的高： document.body.scrollTop;
-
网页被卷去的左： document.body.scrollLeft;
-
网页正文部分上： window.screenTop;
-
网页正文部分左： window.screenLeft;
-
屏幕分辨率的高： window.screen.height;
-
屏幕分辨率的宽： window.screen.width;
-
屏幕可用工作区高度： window.screen.availHeight;
原生js 平滑滚动到页面的某个位置
window.scrollTo(options)
-
top 是文档中的纵轴坐标
-
left 是文档中的横轴坐标
-
behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant
window.scrollTo({
top: 1000,
behavior: "smooth"
});
滚动当前元素，进入浏览器的可见区域(scrollIntoView方法)
element.scrollIntoView(scrollIntoViewOptions); // Object型参数
-
behavior 可选
定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。
-
block 可选
定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。
-
inline 可选
定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});
监听页面滚动(JS、jQuery)
原生js通过window.onscroll监听
window.onscroll = function() {
//为了保证兼容性，这里取两个值，哪个有值取哪一个
//scrollTop就是触发滚轮事件时滚轮的高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log("滚动距离" + scrollTop);
}
Jquery通过$(window).scroll()监听
$(window).scroll(function() {
//为了保证兼容性，这里取两个值，哪个有值取哪一个
//scrollTop就是触发滚轮事件时滚轮的高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log("滚动距离" + scrollTop);
})
jQuery-获取元素尺寸和坐标
坐标
获取页面某一元素的绝对X,Y坐标，可以用offset()
var X = $("#id").offset().top;
var Y = $("#id").offset().left;
获取相对(父元素)位置
var X = $("#id").position().top;
var Y = $("#id").position().left;
尺寸
width() 和 height() 方法
-
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
-
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 和 innerHeight() 方法
-
innerWidth() 方法返回元素的宽度（包括内边距）。
-
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 和 outerHeight() 方法
-
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
-
outerHeight() 方法返回元素的高度（包括内边距和边框）。
-
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
-
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。
获取鼠标当前坐标(JS、jQuery)
JS获取当前鼠标坐标方法
-
clientX: 事件属性是鼠标位置相对于用户窗口客户区中的水平偏移量。
-
clientY: 事件属性是鼠标位置相对于用户窗口客户区中的垂直偏移量。
// 获取当前鼠标所在的位置
function getClientCoordinates(e){
var oEvent=e||event;
x = oEvent.clientX;
y = oEvent.clientY;
return {x,y}
}
jQuery获取当前鼠标坐标方法
-
e.pageX : 相对于用户页面区域的水平偏移量
-
e.pageY : 相对于用户页面区域的垂直偏移量
function getClientCoordinates(e){
x = e.pageX;
y = e.pageY;
return {x,y}
}
网友评论