原生JS实现图片拖拽移动与缩放
看一下最终效果,图片可以拖动,可以缩放
把代码贴出来,可以直接粘贴使用,大致的思想就是鼠标按下的时候获取当时的鼠标位置,要减去left和top值,移动的时候获取位置减去初始的值就得到移动的时候的left和top值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box { width: 100px; height: 100px; background-color: aquamarine; position: absolute; } #father { width: 600px; height: 500px; background-color: rgb(226, 117, 184); position: relative; } img { width: 100%; height: 100%; cursor: move; } #scale { width: 10px; height: 10px; overflow: hidden; cursor: se-resize; position: absolute; right: 0; bottom: 0; background-color: rgb(122, 191, 238); } </style> </head> <body> <div id="father"> <div id="box"> <img src="http://img4.imgtn.bdimg.com/it/u=4245161611,1195625695&fm=27&gp=0.jpg"/> <div id="scale"></div> </div> </div> <script type="text/javascript"> // box是装图片的容器,fa是图片移动缩放的范围,scale是控制缩放的小图标 var box = document.getElementById("box"); var fa = document.getElementById('father'); var scale = document.getElementById("scale"); // 图片移动效果 box.onmousedown=function(ev) { var oEvent = ev; // 浏览器有一些图片的默认事件,这里要阻止 oEvent.preventDefault(); var disX = oEvent.clientX - box.offsetLeft; var disY = oEvent.clientY - box.offsetTop; fa.onmousemove=function (ev) { oEvent = ev; oEvent.preventDefault(); var x = oEvent.clientX -disX; var y = oEvent.clientY -disY; // 图形移动的边界判断 x = x <= 0 ? 0 : x; x = x >= fa.offsetWidth-box.offsetWidth ? fa.offsetWidth-box.offsetWidth : x; y = y <= 0 ? 0 : y; y = y >= fa.offsetHeight-box.offsetHeight ? fa.offsetHeight-box.offsetHeight : y; box.style.left = x + 'px'; box.style.top = y + 'px'; } // 图形移出父盒子取消移动事件,防止移动过快触发鼠标移出事件,导致鼠标弹起事件失效 fa.onmouseleave = function () { fa.onmousemove=null; fa.onmouseup=null; } // 鼠标弹起后停止移动 fa.onmouseup=function() { fa.onmousemove=null; fa.onmouseup=null; } } // 图片缩放效果 scale.onmousedown = function (e) { // 阻止冒泡,避免缩放时触发移动事件 e.stopPropagation(); e.preventDefault(); var pos = { 'w': box.offsetWidth, 'h': box.offsetHeight, 'x': e.clientX, 'y': e.clientY }; fa.onmousemove = function (ev) { ev.preventDefault(); // 设置图片的最小缩放为30*30 var w = Math.max(30, ev.clientX - pos.x + pos.w) var h = Math.max(30,ev.clientY - pos.y + pos.h) // console.log(w,h) // 设置图片的最大宽高 w = w >= fa.offsetWidth-box.offsetLeft ? fa.offsetWidth-box.offsetLeft : w h = h >= fa.offsetHeight-box.offsetTop ? fa.offsetHeight-box.offsetTop : h box.style.width = w + 'px'; box.style.height = h + 'px'; // console.log(box.offsetWidth,box.offsetHeight) } fa.onmouseleave = function () { fa.onmousemove=null; fa.onmouseup=null; } fa.onmouseup=function() { fa.onmousemove=null; fa.onmouseup=null; } } </script> </body> </html>
我画了一张图,来标识每次鼠标移动,图片定位left和top的计算
最近在图片移动的基础上写了一个可以随鼠标移动旋转,拉伸的案例,增加了图片旋转功能,实现方式相对复杂些,有这个需求的可以看我这篇博客https://www.cnblogs.com/steamed-twisted-roll/p/13408245.html
本篇只写了单张图片的移动缩放,多张图片的移动缩放在另一篇博客https://www.cnblogs.com/steamed-twisted-roll/p/14263159.html这篇是用jQuery写的,可以单张图片也可以多张图片
