<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
*{padding:0;margin:0}
body{font-size:14px;font-family:"微软雅黑";padding:25px;}
a{text-decoration:none;color:#3333}
.item2{width:200px;height:200px;background:red;padding:25px;margin:25px;position:absolute;color:#fff;
text-align:center;line-height:200px;font-weight:bold;font-size:24px;}
#linex,#liney{position:absolute;top:0;left:0;}
#linex{width:100%;border-top:2px dashed #111;}
#liney{height:100%;border-right:2px dashed #111;}
#text{background:#999;color:#fff;height:25px;display:inline-block;line-height:25px;font-size:14px;padding:5px;position:absolute;font-weight:700}
</style>
</head>
<body>
<div id="linex"></div>
<div id="liney"></div>
<div id="text">sdfsdfsd</div>
<div>//鼠标位置---通过鼠标事件才能获取
//onmousedown(鼠标按下) onmousemove(鼠标移动) onmouseup (鼠标松开) onmouseover(鼠标进入) onmouseout(鼠标离开)
//(onmouseenter(鼠标进入) onmouseleave(鼠标离开))//鼠标位置---通过鼠标事件才能获取
//(onmouseenter(鼠标进入) onmouseleave(鼠标离开))//鼠标位置---通过鼠标事件才能获取
//onmousedown(鼠标按下) onmousemove(鼠标移动) onmouseup (鼠标松开) onmouseover(鼠标进入) onmouseout(鼠标离开)
//(onmouseenter(鼠标进入) onmouseleave(鼠标离开))</div>
<script>
//鼠标位置---通过鼠标事件才能获取
//onmousedown(鼠标按下) onmousemove(鼠标移动) onmouseup (鼠标松开) onmouseover(鼠标进入) onmouseout(鼠标离开)
//(onmouseenter(鼠标进入) onmouseleave(鼠标离开))
function dom(id){
return document.getElementById(id);
};
window.onload = function(){
//alert(document.body.scrollHeight+"===="+document.body.scrollTop+"===="+document.body.offsetHeight);
//窗口的宽度和高度
//alert(window.innerWidth+"==="+window.innerHeight);//
};
//banner
//div拖拽面向对象的版本 + 自定义滚动条
//每个一个事件都是有event对象,就记录对象的状态，值，相关操作
document.onmousemove = function(e){
var pos = getXY(e);
dom("linex").style.left = pos.x+"px";
dom("linex").style.marginLeft = -pos.x+"px";
dom("linex").style.top = pos.y+"px";
dom("liney").style.left = pos.x+"px";
dom("liney").style.height = document.body.clientHeight+"px";
dom("liney").style.top = pos.y+"px";
dom("liney").style.marginTop = -pos.y+"px";
dom("text").innerHTML = "pageX:"+pos.x+",pageY :"+pos.y+", clientX:"+pos.x+",clientY :"+pos.y;
dom("text").style.left = (pos.x+4)+"px";
dom("text").style.top = (pos.y+4)+"px";
};
function getXY(e){
var ev = e || window.event;
//坐标的获取
//ie678 pageX pageY (包含滚动条的scrollLeft 和scrollTop)
//ie9+ clientX clientY (不包含滚动条的scrollLeft 和scrollTop)
var x=0,y=0;
if(ev.pageX){
x = ev.pageX;
y = ev.pageY;
}else{
//拿到scrollTop 和scrollLeft
var sleft = 0,stop = 0;
//ie678---
if(document.documentElement){
stop =document.documentElement.scrollTop;
sleft = document.documentElement.scrollLeft;
}else{
//ie9+ 谷歌
stop = document.body.scrollTop;
sleft = document.body.scrollLeft;
}
x = ev.clientX + sleft;
y = ev.clientY + stop;
}
return {x:x,y:y};
};
</script>
</body>
</html>