<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
position: absolute;
width: 300px;
height: 200px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var div = document.getElementsByTagName('img')[0];
//按住鼠标移动 mousedown
div.onmousedown = function(e){
var ev = window.event || e;
//计算鼠标位置和实际位置 差
// var a = ev.pageY - this.offsetTop;
// var b = ev.pageX - this.offsetLeft;
var sT = document.documentElement.scrollTop || document.body.scrollTop;
var sL = document.documentElement.scrollLeft || document.body.scrollLeft;
//ie中page 不允许用 到元素的距离 页面被卷去的高度
var a = ev.clientY + sT - this.offsetTop;
//横向没有滚动条，可以不兼容
var b = ev.clientX + sL - this.offsetLeft;
//鼠标移动事件 移动过快 mousemove
// div.onmousemove = function(e){
document.onmousemove = function(e){
var ev = window.event || e;
//获取鼠标位置
var sT = document.documentElement.scrollTop || document.body.scrollTop;
var sL = document.documentElement.scrollLeft || document.body.scrollLeft;
//获取鼠标位置
// var x = ev.pageX;
// var y = ev.pageY;
var x = ev.clientX + sL;
var y = ev.clientY + sT;
div.style.left = (x-b) +'px';
div.style.top = (y-a) +'px';
return false;//防止拖拽图片和文字出现的bug
}
}
//松开鼠标
div.onmouseup = function(){
//取消移动事件
// div.onmousemove = null;
document.onmousemove = null;
}
}
</script>
</head>
<body>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586348889091&di=7f1c3c853bcaee2ef9bdd98e87d19be6&imgtype=0&src=http%3A%2F%2Fcdn.wecarepet.net%2Fupload%2Fimage_26_1458374949521.jpeg" alt="t">
</body>
</html>
控制范围显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
position: absolute;
width: 300px;
height: 200px;
background-color: red;
}
body {
height: 3000px;
}
</style>
<script type="text/javascript">
window.onload = function() {
//需求：鼠标按在div上 并移动， div就跟随鼠标移动
var div = document.getElementsByTagName('img')[0];
//1 按住鼠标
div.onmousedown = function(e) {
var ev = window.event || e;
//相对于html文档
// console.log(ev.pageX,ev.pageY)
//相对于屏幕
// console.log(ev.clientX,ev.clientY)
//兼容处理 没有滚动条可以不用
var sT = document.documentElement.scrollTop || document.body.scrollTop;
var sL = document.documentElement.scrollLeft || document.body.scrollLeft;
//计算鼠标位置 差
var a = ev.clientY + sT - this.offsetTop;
var b = ev.clientX + sL - this.offsetLeft;
//ie6- 使用全局捕获解决拖拽问题
if (this.setCapture) {
this.setCapture();
}
//3 拖动
document.onmousemove = function(e) {
var ev = window.event || e;
//获取鼠标位置
var sT = document.documentElement.scrollTop || document.body.scrollTop;
var sL = document.documentElement.scrollLeft || document.body.scrollLeft;
var x = ev.clientX + sL;
var y = ev.clientY + sT;
var dx = x - b;
var dy = y - a;
//限制移动区域
//上
if (dy <= sT) {
dy = sT;
}
//左
if (dx <= sL) {
dx = sL;
}
//右
if (dx >= document.documentElement.clientWidth + sL - div.clientWidth) {
dx = document.documentElement.clientWidth + sL - div.clientWidth;
}
//下
if (dy >= document.documentElement.clientHeight + sT - div.clientHeight) {
dy = document.documentElement.clientHeight + sT - div.clientHeight
}
//设置位置
div.style.left = dx + 'px';
div.style.top = dy + 'px';
return false; //防止拖拽图片和文字的时候出现的bug
}
}
//抬起鼠标
div.onmouseup = function() {
//取消事件
document.onmousemove = null;
if (this.releaseCapture) {
this.releaseCapture(); //释放捕获
}
}
}
</script>
</head>
<body>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586348889091&di=7f1c3c853bcaee2ef9bdd98e87d19be6&imgtype=0&src=http%3A%2F%2Fcdn.wecarepet.net%2Fupload%2Fimage_26_1458374949521.jpeg">
</body>
</html>
