html鼠标切图,记录：图片跟着鼠标飞（浏览器兼容）

王侯将相宁有种乎

*{

margin: 0;

padding: 0;

}

body{

height: 2000px;

}

img{

position: absolute;

}

//下面的代码在谷歌和火狐支持 初次版本

// my$("im").style.left=e.pageX+"px";

// my$("im").style.top=e.pageY+"px";

//下面的代码在IE8中不支持,不支持pageX和pageY的属性

// my$("im").style.left=window.event.pageX+"px";

// my$("im").style.top=window.event.pageY+"px";

//图片跟着鼠标飞,可以在任何的浏览器中实现

//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.οnmοusemοve=function (e) {

my$("im").style.left=evt.getPageX(e)+"px";

my$("im").style.top=evt.getPageY(e)+"px";

};