```
<!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 -->
```
