js-鼠标事件-拖放图片（对鼠标事件进一步加深印象）

有时候验证码拼图的形式，就运用了拖动图片的思想

css部分（用一个蓝色盒子模拟图片）
由于需要更改图片位置，所以要加定位

<style>*{margin:0;padding:0}#box{width:300px;height: 300px;background: blue;position: absolute;left:0px;top:0px;}
</style>

html部分

<body><div id="box"></div><script src="script.js"></script></body>

js部分
1.首先分析本案例鼠标事件的前两个阶段：先点击固定在图片上，在拖动。
点击：onmousedown事件拖动：onmousemove事件

2.进行移动距离分析：

①.先把盒子的left，right值设置成e.clientX和e.clientY

var box = document.querySelector('#box');
box.onmousedown = function() {box.onmousemove = function(e) {box.style.left = e.clientX + 'px';box.style.top = e.clientY + 'px'}
}

会发现移动时：
鼠标在图片的左上方（我们想要鼠标在图片的里面进行拖动）

②.进行分析：

我们想要盒子在理想化的位置上必须求出理想化位置的left：x值
x=蓝色鼠标位置的e.clientX- k
我们怎么求k呢
看上图可知，理想化位置的k值等于初始位置的k值
而初始位置的k值=黑色鼠标位置-初始位置的offsetLeft

理想化位置的top：y与x的求解思路相同

代码如下：

var box = document.querySelector('#box');
box.onmousedown = function(e) {var x = e.clientX - box.offsetLeft;var y = e.clientY - box.offsetTop;box.onmousemove = function(e) {box.style.left = e.clientX - x + 'px';box.style.top = e.clientY - y + 'px'}
}

2.写到这，在移动过程中有一个小小的bug，如果鼠标移动太快，蓝色盒子会消失，这是为什么呢？
因为鼠标移动太快，鼠标就脱离了图片，box.onclick事件也就无法触发了
所以我们进行如下更改：（把box改成document）

document.onmousemove = function(e) {box.style.left = e.clientX - x + 'px';box.style.top = e.clientY - y + 'px'}

3.鼠标事件最后一个阶段：脱离
onmouseup事件并利用了dom零级事件的删除，即事件=null

box.onmouseup = function() {document.onmousemove = null;}

这样就完成了拖放图片的效果啦
---------------------------------------------------------------------------------------------------

本案例注意点：
box.onmousemove事件一定要在box.onmousedown事件里面：
因为拖动效果是在点击选中的基础上实现的

js-鼠标事件-拖放图片（对鼠标事件进一步加深印象）相关推荐

html鼠标移动时图片放大缩小,JS与CSS3实现图片响应鼠标移动放大效果示例
本文实例讲述了JS与CSS3实现图片响应鼠标移动放大效果.分享给大家供大家参考,具体如下: 今天看网易的网站上,当我把鼠标放上去的时候发现图片放大,移开图片缩小,于是自行尝试,结果如下. 方法一:使用 ...
DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand ...
php 鼠标点击图片放大,鼠标移入放大图片预览效果实现
商城项目中,有鼠标移入图片放大的功能,研究一下实现 Image zoom body { display: flex; justify-content: center; align-items: cen ...
html鼠标滑过图片透明,鼠标滑过图片透明度发生改变的特效 - YangJunwei
这个特效感觉不错,把代码发出来共享一下! 此特效实现了网页图片半透明特效,把鼠标放上后可以改变透明度! 第一步:在网页中加入以下脚本代码: Javascript 代码 nereidFadeObject ...
【JavaScript】js可以直接使用的鼠标经过切换图片
js实现简单的鼠标经过切换图片,鼠标移出图片还原. 代码如下 <!DOCTYPE html> <html lang="en"> <head>&l ...
鼠标滚动调整图片大小（css3 zoom 放大缩小）
文章目录 zoom 作用说明语法案例解释 onmousewheel 鼠标滚动,图片缩放鼠标滚动事件 zoom 作用说明设置或检索对象的缩放比例. normal: 使用对象的实际尺寸. <n ...
用vue实现，鼠标悬停放大图片，根据鼠标位置倾斜图片网页源码
大家好,今天给大家介绍一款,用vue实现的,鼠标悬停放大图片,并根据鼠标位置倾斜图片前端网页源码(图1).送给大家哦,获取方式在本文末尾. 图1 鼠标悬停放大图片,鼠标移动图片就会进行相应角度的倾斜, ...
jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏
1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...
QT中事件与图形处理详细（鼠标、键盘、定时等事件与图片加载处理）
QT事件简介:QT程序是事件驱动的,程序的每个动作都是由内部某个事件所触发.QT事件的发生和处理成为程序运行的主线,存在于程序整个生命周期. 常见的QT事件类型如下: 键盘事件: 按键按下和松开鼠标 ...
html鼠标悬停事件 dw,dw制作鼠标放上去图片就显示鼠标离开图片就消失
今天小编就为大家介绍dw制作鼠标放上去图片就显示鼠标离开图片就消失的效果,操作方法很简单的,不会的朋友可以参考本文哦! 操作步骤: 1.新建"HTML文档",在"布局&q ...

js-鼠标事件-拖放图片（对鼠标事件进一步加深印象）

js-鼠标事件-拖放图片（对鼠标事件进一步加深印象）

js-鼠标事件-拖放图片（对鼠标事件进一步加深印象）相关推荐

最新文章

热门文章