<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标移入事件</title>
<script type="text/javascript">
onload = function(){
//1.
// document.onclick = function(evt){
// var oEvent = evt || event;
//
// var x = oEvent.clientX;
// var y = oEvent.clientY;
//
// //获取box
// var oBox = document.getElementById("box");
// var width = oBox.offsetWidth;//获取元素宽度
// var height = oBox.offsetHeight;//获取元素高度
// oBox.style.left = x-width/2 + "px";
// oBox.style.top = y-height/2 + "px";
// }
//2
//获取box
var oBox = document.getElementById("box");
var width = oBox.offsetWidth;
var height = oBox.offsetHeight;
document.onmousemove = function(evt){
var oEvent = evt || event;
var x = oEvent.clientX;
var y = oEvent.clientY;
oBox.style.left = x-width/2 + "px";
oBox.style.top = y-height/2 + "px";
}
}
</script>
</head>
<body style="background: black;">
<img id="box" src="imgs/girl.gif" style="position: absolute;left: 10px;top: 10px;"/>
</body>
</html>