JavaScript实现鼠标拖动图片移动效果

最新推荐文章于 2023-05-18 11:26:22 发布

璞~

最新推荐文章于 2023-05-18 11:26:22 发布

阅读量515

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_39702981/article/details/115619430

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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>

璞~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现鼠标拖动图片移动效果

<!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&.
复制链接

扫一扫