JavaScript实现鼠标拖动图片移动效果
程序员文章站
2022-07-14 09:39:44
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img{width: 150px;height: 150px;position: absolute;left: 0px;top: 0px;}
</style>
</head>
<body>
<img src="../images/1.jpg" id='pic' draggable='false'>
<script type="text/javascript">
var oipc=document.getElementById('pic');
var isDrag=false;//是否开始拖拽 false 不拖拽
var disX,disY;//图片相对于图片的位置
//鼠标按下时
oipc.onmousedown=function(e){
isDrag=true;
this.style.cursor='move';
e=e||window.event;//兼容性写法
//鼠标位置
var x=e.clientX;
var y=e.clientY;
//鼠标相对于图片的位置
disX=x-this.offsetLeft;
disY=y-this.offsetTop;
}
//鼠标移动时
document.onmousemove=function(e){
if(!isDrag){
return;
}
e=e||window.event;//兼容性写法
//鼠标位置
var x=e.clientX;
var y=e.clientY;
//修改图片位置
oipc.style.left=x-disX+'px';
oipc.style.top=y-disY+'px';
}
//鼠标抬起时
document.onmouseup=function(){
isDrag=false;
oipc.style.cursor='default';
}
</script>
</body>
</html>
上一篇： Python 排列组合
下一篇： 单例模式（懒汉与饿汉）