拖拽案例.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>
//需求：鼠標(biāo)進(jìn)入盒子之后只要移動苍狰，哪怕1像素货岭，隨時更換里面的內(nèi)容。（鼠標(biāo)在盒子中的坐標(biāo)）
//技術(shù)點(diǎn)：新事件，onmousemove.在事件源上哪怕移動1像素也會觸動這個事件驶悟。
//一定程度上，模擬了定時器
//步驟：
//1.老三步和新五步
//2.獲取鼠標(biāo)在整個頁面的位置
//3.獲取盒子在整個頁面的位置
//4.用鼠標(biāo)的位置減去盒子的位置賦值給盒子的內(nèi)容钟哥。
//1.老三步和新五步
var div = document.getElementsByTagName("div")[0];
div.onmousemove = function (event) {
// event = event || window.event;
// //2.獲取鼠標(biāo)在整個頁面的位置
// 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.用鼠標(biāo)的位置減去盒子的位置賦值給盒子的內(nèi)容浙踢。
// var targetx = pagex - xx;
// var targety = pagey - yy;
// this.innerHTML = "鼠標(biāo)在盒子中的X坐標(biāo)為："+targetx+"px;<br>鼠標(biāo)在盒子中的Y坐標(biāo)為："+targety+"px;"
event = event || window.event;
//2.獲取鼠標(biāo)在整個頁面的位置
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.用鼠標(biāo)的位置減去盒子的位置賦值給盒子的內(nèi)容。
var targetx = pagex - div.offsetLeft;
var targety = pagey - yy;
this.innerHTML = "鼠標(biāo)在盒子中的X坐標(biāo)為："+targetx+"px;<br>鼠標(biāo)在盒子中的Y坐標(biāo)為："+targety+"px;"
}
</script>
</body>
</html>
