offset系列：元素
获取元素的宽和高,left,top, offsetParent,应该使用offset系列来获取
offsetWidth:获取元素的宽
offsetHeight:获取元素的高
offsetLeft:获取元素距离左边位置的值
offsetTop:获取元素距离上面位置的值
scroll系列：获取元素的样式属性
元素的样式属性是无法直接通过:对象.style.属性 来获取(样式在style属性中设置)
scroll系列:卷曲出去的值
scrollLeft:向左卷曲出去的距离
scrollTop:向上卷曲出去的距离
scrollWidth:元素中内容的实际的宽(如果内容很少,没有内容,就是元素自身的宽),没有边框
scrollHeight:元素中内容的实际的高(如果内容很少或者没有内容,就是元素自身的高),没有边框
client系列：可视区域
clientWidth:可视区域的宽(没有边框),边框内部的宽度
clientHeight:可视区域的高(没有边框),边框内部的高度
clientLeft: 左边边框的宽度
clientTop :上面的边框的宽度
案例：图片跟着鼠标飞
简单版（有bug，一滚动就不行了）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> img { position: absolute; } </style> </head> <body> <img src="images/tianshi.gif" alt="" id="im"> <script src="common.js"></script> <script> //鼠标在页面中移动,图片跟着鼠标移动 document.onmousemove = function (e) { //鼠标的移动的横纵坐标 //可视区域的横坐标 //可视区域的纵坐标 my$("im").style.left = e.clientX + "px"; my$("im").style.top = e.clientY + "px"; }; </script> </body> </html>
终极版：可以在任何的浏览器中实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> *{ margin: 0; padding: 0; } body{ height: 2000px; } img{ position: absolute; } </style> </head> <body> <img src="images/bird.png" alt="" id="im" /> <script src="common.js"></script> <script> //图片跟着鼠标飞,可以在任何的浏览器中实现 //window.event和事件参数对象e的兼容 //clientX和clientY单独的使用的兼容代码 //scrollLeft和scrollTop的兼容代码 //pageX,pageY和clientX+scrollLeft 和clientY+scrollTop //把代码封装在一个函数 //把代码放在一个对象中 var evt={ //window.event和事件参数对象e的兼容 getEvent:function (evt) { return window.event||evt; }, //可视区域的横坐标的兼容代码 getClientX:function (evt) { return this.getEvent(evt).clientX; }, //可视区域的纵坐标的兼容代码 getClientY:function (evt) { return this.getEvent(evt).clientY; }, //页面向左卷曲出去的横坐标 getScrollLeft:function () { return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0; }, //页面向上卷曲出去的纵坐标 getScrollTop:function () { return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0; }, //相对于页面的横坐标(pageX或者是clientX+scrollLeft) getPageX:function (evt) { return this.getEvent(evt).pageX? this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft(); }, //相对于页面的纵坐标(pageY或者是clientY+scrollTop) getPageY:function (evt) { return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop(); } }; //最终的代码 document.onmousemove=function (e) { my$("im").style.left=evt.getPageX(e)+"px"; my$("im").style.top=evt.getPageY(e)+"px"; }; </script> </body> </html>
