拖拽案例.gif
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 300px;
height: 200px;
padding-top: 100px;
background-color: pink;
margin: 100px;
text-align: center;
font: 18px/30px "simsun";
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
</div>
<script src="animate.js"></script>
<script>
//需求：鼠标进入盒子之后只要移动，哪怕1像素，随时更换里面的内容。（鼠标在盒子中的坐标）
//技术点：新事件，onmousemove.在事件源上哪怕移动1像素也会触动这个事件。
//一定程度上，模拟了定时器
//步骤：
//1.老三步和新五步
//2.获取鼠标在整个页面的位置
//3.获取盒子在整个页面的位置
//4.用鼠标的位置减去盒子的位置赋值给盒子的内容。
//1.老三步和新五步
var div = document.getElementsByTagName("div")[0];
div.onmousemove = function (event) {
// event = event || window.event;
// //2.获取鼠标在整个页面的位置
// var pagex = event.pageX || scroll().left + event.clientX;
// var pagey = event.pageY || scroll().top + event.clientY;
// //3.获取盒子在整个页面的位置
// var xx = div.offsetLeft;
// var yy = div.offsetTop
// //4.用鼠标的位置减去盒子的位置赋值给盒子的内容。
// var targetx = pagex - xx;
// var targety = pagey - yy;
// this.innerHTML = "鼠标在盒子中的X坐标为："+targetx+"px;<br>鼠标在盒子中的Y坐标为："+targety+"px;"
event = event || window.event;
//2.获取鼠标在整个页面的位置
var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top + event.clientY;
//3.获取盒子在整个页面的位置
var xx = div.offsetLeft
var yy = div.offsetTop
//4.用鼠标的位置减去盒子的位置赋值给盒子的内容。
var targetx = pagex - div.offsetLeft;
var targety = pagey - yy;
this.innerHTML = "鼠标在盒子中的X坐标为："+targetx+"px;<br>鼠标在盒子中的Y坐标为："+targety+"px;"
}
</script>
</body>
</html>
