【案例】DIV随鼠标移动而移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div跟随鼠标移动而移动</title>
<style>
*{
margin: 0;
padding: 0;
}
#ball{
width: 200px;
height: 200px;
border-radius: 50%;
background: pink;
position: absolute;
cursor: move;
}
</style>
</head>
<body>
<div id="ball"></div>
</body>
<script>
//获取元素
var ball = document.getElementById('ball');
console.log(ball);
//将鼠标的移动事件交给外部更大的容器window,以保证鼠标不丢失
/*ball.onmousemove = function(e){}*/
window.onmousemove = function(e){
var e = e || window.event;
var newLeft = e.clientX - ball.offsetWidth / 2;
var newTop = e.clientY - ball.offsetHeight / 2;
ball.style.left = newLeft + 'px';
ball.style.top = newTop + 'px';
}
</script>
</html>
