```
<!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 >
*{
padding: 0;
margin: 0;
}
.boss1{
width: 500px;
height:500px;
background-color: brown;
}
.boss1 .cur{
width: 200px;
height:200px;
background-color: brown;
background: url(./img/1.jpg);
background-size: 200px 200px;
position: absolute;
display:none;
}
</style>
</head>
<body>
<div class="boss1"id="boss">
<div class="cur" id="box"></div>
</div>
</body>
</html>
<script type="text/javascript">
var bss=document.getElementById("box");//获取属性节点.
var diyi= document.onmousemove=function(event2){ //第一次鼠标经过获取移动块元素节点。
var bc=event2||window.event;
var ssx=bc.clientX;
var ssy=bc.clientY;
console.log(bc);
bss.style.left=ssx+"px";
bss.style.top=ssy+"px";
bss.style.display="block";
}
bss.onmouseenter=function(event){ //进入
var bs=event||window.event;
var x=bs.offsetX;
var y=bs.offsetY; //获取当前元素节点。
bss.style.display="block";
document.onmousemove=function(event1){ //鼠标全局移动
var bs1=event1||window.event;
var l=bs1.clientX-x;
var s=bs1.clientY-y;
if(l>=300)l=300;
if(l<=0)l=0;
if(s>=300)s=300;
if(s<=0)s=0;
bss.style.left=l+"px";
bss.style.top=s+"px";
}
}
document.onmouseup=function(){
document.onmousemove=null;
}
</script>
<!-- offsetX 以当前事件的目标对象左上顶角为原点，定位 x 轴坐标 所有浏览器，不兼容 Mozilla
offsetY 以当前事件的目标对象左上顶角为原点，定位 y 轴坐标
clientX 以浏览器窗口左上顶角为原点，定位 x 轴坐标 所有浏览器，不兼容 Safari
clientY 以浏览器窗口左上顶角为原点，定位 y 轴坐标 event -->
```
