鼠标控制拖拽图片(含测试源码)"/>
JavaScript小白实现鼠标控制拖拽图片(含测试源码)
本博文源于js基础，旨在实现鼠标控制拖拽图片。
博主上一篇博文是
JavaScript小白实现图片放大镜效果(含测试源码)
题目再现
海绵宝宝图片放在一个div盒子中，按住鼠标可以拖拽它，但是不能将这个图片摇拽出盒子边框
实验效果
实现原理
需要使用鼠标事件提供的鼠标位置。原理是这样的：当鼠标指针按下的一瞬间，记录鼠标指针相对页面顶端的距离，保存为变量startX,startY.当鼠标移动时，实时计算鼠标指针此时的位置和startX,startY的改变量，记为变量deltaX，deltaY，让图片做出同样的改变量即可。
测试用图
图片另存为"xiao.gif"
附上代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div {width: 850px;height: 850px;border: 3px solid orange;position: relative;margin: 100px;}img {position: absolute;}</style></head><body><div id="box">鼠标点击图片可拖拽<img src="../numbers/xiao.gif" id="haimian" /></div><script type="text/javascript">var img = document.getElementById("haimian");var box = document.getElementById("box");//引入信号量var x = 0;var y = 0;//变化量var deltaX = 0, deltaY = 0;img.onmousedown = function(event){//记录按下鼠标的时候鼠标指针到页面的距离var startX = event.pageX;var startY = event.pageY;//按下鼠标的时候document.onmousemove = function(event){//计算当前鼠标的位置和按下鼠标的时候的变化量！deltaX = event.pageX - startX;deltaY = event.pageY- startY;//验收，保证元素在容器内if(deltaX > 400 - x){deltaX = 400 - x;}else if(deltaX < -x){deltaX = -x;}if(deltaY > 400 - y){deltaY = 400 - y;}else if(deltaY < -y){deltaY = -y;}//让left值变化，就是信号量与变化量的代数和img.style.left = x + deltaX + "px";img.style.top = y + deltaY + "px";return false;}return false;}//鼠标指针抬起的时候做的事情document.onmouseup = function(){//这里是重点：当鼠标抬起的时候，要设置新的信号量值！x = x + deltaX;y = y + deltaY;//为了防止bug，用户在空白区域点击，我们一次拖拽完成之后，让变化量恢复为0deltaX = 0;deltaY = 0;//剥夺监听document.onmousemove = null;}</script></body>
</html>更多推荐
JavaScript小白实现鼠标控制拖拽图片(含测试源码)
发布评论