<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>在当前显示区范围内实现点不到的小方块</title>
<style>
div{position:fixed;width:100px;height:100px;
background-image:url(images/xiaoxin.gif);
background-size:100%;
}
</style>
</head>
<body>
<div id="pop"></div>
<script>
pop.onclick=function(e){
console.log(e.screenX,e.screenY);
console.log(e.clientX,e.clientY);
console.log(e.offsetX,e.offsetY);
}
//先定义开关：
var canMove=false;//开始时暂时不可移动
//定义变量保存拖拽开始时 鼠标在图片的相对偏移距离
var offsetX,offsetY;
//当鼠标在pop上按下时
pop.onmousedown=function(e){
canMove=true;//打开开关
//当按下鼠标打开开关时，立刻记录在图片内的相对偏移距离
offsetX=e.offsetX;
offsetY=e.offsetY;
}
//当鼠标在窗口移动时
window.onmousemove=function(e){
//只有开关打开时
if(canMove==true){
//才同时改变pop的位置
//先获得鼠标相对于文档显示区的坐标
var left=e.clientX;
var top=e.clientY;
//再设置pop的left和top与鼠标的位置相同
pop.style.left=left-offsetX+"px";
pop.style.top=top-offsetY+"px";
}
}
//当鼠标在pop上抬起时
pop.onmouseup=function(){
canMove=false;//关闭开关
}
</script>
</body>
</html>