<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img{width: 300px;position: absolute;}
</style>
</head>
<body>
<img src="images/3.jpg" alt="" id="pic" draggable="false">
<script type="text/javascript">
var oImg=document.getElementById('pic');
var disX,disy;//鼠标相对于图片的位置
var isDrag=false;//是否开始拖拽 false 不开始
//鼠标按下事件
oImg.onmousedown=function(e){
isDrag=true;//开始拖拽
e=e||window.event;//兼容性写法
//鼠标位置
var x=e.clientX;
var y=e.clientY;
//鼠标相对于图片的坐标
disX=x-this.offsetLeft;
disY=y-this.offsetTop;
this.style.cursor="move";
}
//鼠标移动事件
document.onmousemove=function(e){
if (!isDrag) {
return;
}
e=e||window.event;//兼容性写法
//鼠标位置
var x=e.clientX;
var y=e.clientY;
//修改图片位置
oImg.style.left=x-disX+'px';
oImg.style.top=y-disY+'px';
}
//鼠标抬起事件
document.onmouseup=function(e){
isDrag=false;
oImg.style.cursor="default";
}
</script>
</body>
</html>拖拽图片
猜你喜欢
转载自blog.csdn.net/weixin_44606660/article/details/87598271
今日推荐
周排行