offset,client,scroll三者的区别
offset,client,scroll三者的区别
- offset：鼠标距离父盒子带有定位的距离，调用者为任意元素；
- client：鼠标距离浏览器可视区域的距离，调用者为e；
- scroll：获取浏览器无法显示的区域，调用者为window
下面是在页面中实现图片的拖动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在当前页面实现图片拖动</title>
<style>
#img{
background: url("images/xiaoxin.gif");
width: 200px;
height: 200px;
background-size: 100%;
position: fixed;
}
</style>
</head>
<body>
<div id="img"></div>
</body>
</html>
<script>
var move=false,offsetX,offsetY;
console.log(img);
img.onmousedown=function (e) {
move=true;
offsetX=e.offsetX;
console.log(1);
offsetY=e.offsetY;
}
window.onmousemove=function (e) {
if(move){
var top=e.clientY-offsetY;
var left=e.clientX-offsetX;
img.style.top=top+"px";
img.style.left=left+"px";
}
}
img.onmouseup=function() {
move=false;
}
</script>