<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$坚持敲代码到手软$</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
position: absolute;
margin-left: 100px;
margin-top: -200px;
}
body{
height: 2000px;
}
</style>
</head>
<body>
<img src="images/tianshi.gif" alt="" id="im" />
<script>
//关于事件参数对象的工具的代码
var evtTools={
//事件参数
evt:function (e) {
return window.event?window.event:e;
},
//页面向左卷曲出去的距离
left:function () {
return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
},
//页面向上卷曲出去的距离
top:function () {
return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
},
//事件参数对象中的属性封装---可视区域的横坐标
clientX:function (e) {
return this.evt(e).clientX;
},
//事件参数对象中的属性封装---可视区域的纵坐标
clientY:function (e) {
return this.evt(e).clientY;
},
pageX:function (e) {
return this.evt(e).pageX?this.evt(e).pageX:this.left()+this.clientX(e);
},
pageY:function (e) {
return this.evt(e).pageY?this.evt(e).pageY:this.top()+this.clientY(e);
}
};
document.onmousemove=function (e) {
my$("im").style.left=evtTools.pageX(e)-my$("im").offsetWidth/2-100+"px";
my$("im").style.top=evtTools.pageY(e)-my$("im").offsetHeight/2+200+"px";
};
</script>
</body>
</html>