html拖动图片并缩放特效,原生JS实现图片拖拽移动与缩放.html

Document

#father {

width: 600px;

height: 500px;

background-color: rgb(226, 117, 184);

position: relative;

left: 200px;

top: 200px;

transform: scale(0.7201, 0.669);

}

#box {

width: 100px;

height: 100px;

background-color: aquamarine;

position: absolute;

}

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);

}

// 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();

//alert(oEvent.clientX);

//alert(box.offsetLeft);

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

};

//alert(JSON.stringify(pos));

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;

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史