鼠标点击图片后移动事件

最新推荐文章于 2023-01-30 22:01:36 发布

csdnmazhiyuan

最新推荐文章于 2023-01-30 22:01:36 发布

阅读量1.4k

点赞数

分类专栏： javascript前端文章标签： javascript

本文链接：https://blog.csdn.net/CSDNmazhiyuan/article/details/78095788

版权

javascript前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript实现一个简单的图片拖动效果。通过监听鼠标按下、移动和释放事件，计算鼠标与图片的相对位置，实时更新图片的坐标，从而实现图片跟随鼠标移动的功能。代码示例详细展示了具体的实现过程。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
div{
position: absolute;
top:200px;/*div的y轴*/
left:150px;/*div的x轴*/
width: 300px;
height: 200px;
background-color: aqua;
}
div:hover{
cursor: move;
}
</style>

<script>
/*
* 分析：
* 获取鼠标实时移动的坐标：m_move_x;m_move_y;
* 鼠标按下时的坐标：m_down_x;m_down_y;
* div的坐标：dx,dy;
* 鼠标按下时，鼠标与div的偏移量：md_x,md_y;
* div的新坐标：ndx,ndy;
*/

var isDown = false;//记录鼠标状态
var move_div;;//要操作的div对象
var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,md_x,md_y,ndx,ndy;

//鼠标按下
function down(){
move_div=document.getElementById("move_div");
isDown = true;

//获取鼠标按下时的坐标
m_down_x = event.pageX;
m_down_y = event.pageY;

//获取div的坐标
dx = move_div.offsetLeft;
dy = move_div.offsetTop;

//获取鼠标与div偏移量
md_x = m_down_x - dx;
md_y = m_down_y - dy;
}
//鼠标移动
function move(){
move_div = document.getElementById("move_div");

//实时更新div坐标
dx = move_div.offsetLeft;
dy = move_div.offsetTop;

//获取鼠标移动实时坐标
m_move_x = event.pageX;
m_move_y = event.pageY;

//鼠标按下时移动才触发
if(isDown){
//获取新div坐标：鼠标实时坐标-鼠标与div的偏移量
ndx = m_move_x - md_x;
ndy = m_move_y - md_y;

//把新div坐标值赋给div对象
move_div.style.left = ndx+"px";
move_div.style.top = ndy+"px";
}

}
//鼠标释放
function up(){
isDown = false;
}

</script>

</head>
<body>

<div id="move_div" οnmοusedοwn="down()" οnmοuseup="up()" οnmοusemοve="move()"></div>

</body>
</html>