注意:
● 我们让盒子跟着鼠标在页面上移动,这个移动事件绑在页面上,而不是绑在盒子上,也就是绑在document上,不能绑在div上,不然你只能鼠标在盒子身上移动,在页面上移动就没效果;
● 只有当你属性按下盒子时,才能移动,所以鼠标移动事件要定义在鼠标按下事件里面;
● 在鼠标抬起时,给鼠标移动事件解绑;
方法一:在鼠标按下事件中定义鼠标移动事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: skyblue;
/* 一定要有定位,不然下面关键点地方不起作用 */
pos