JS之鼠标在盒子中的位置

需求：鼠标进入盒子之后只要移动，哪怕1像素，随时更换里面的内容(鼠标在盒子中的坐标)
技术点：新事件，onmousemove,在事件源上哪怕移动1像素也会触动这个事件
一定程度上模拟了定时器
步骤：
1.老三步和新五步
2.获取鼠标在整个页面的位置
3.获取盒子在整页面的位置
4.用鼠标的位置减去盒子的位置赋值给盒子的内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
<style type="text/css">
.box{
    width: 300px;
    height: 200px;
    background-color:pink;
    margin: 100px;
    text-align: center;
    padding-top: 100px;
    cursor: pointer; 
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
//需求：鼠标进入盒子之后只要移动，哪怕1像素，随时更换里面的内容(鼠标在盒子中的坐标)
//技术点：新事件，onmousemove,在事件源上哪怕移动1像素也会触动这个事件
//一定程度上模拟了定时器
//步骤：
//1.老三步和新五步
//2.获取鼠标在整个页面的位置
//3.获取盒子在整页面的位置
//4.用鼠标的位置减去盒子的位置赋值给盒子的内容
//

//1.老三步和新五步
var div = document.getElementsTagName("div")[0];
div.onmousemove = function(event){
//兼容获取事件对象
event = event || window.event;
//获取鼠标在整个页面的位置
var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top + event.clientY;
//获取盒子在整个页面的位置
var divx = div.offsetLeft;
var divy = div.offsetTop;
//4.用鼠标的位置减去盒子的位置赋值给盒子的内容
var targetx = pagex - divx;
var targety = pagey - divy;
this.innerHTML="鼠标在盒子的X位置："+targetx+"px;<br>鼠标在盒子的Y位置："+targety+"px.";

}


</script>
</body>
</html>

 

posted @ 2018-01-03 10:49  乖乖乖码  阅读(1173)  评论(0)    收藏  举报