画像をマウスで掴んで伸縮
画像内のどこクリックしても同じような挙動だったり、
高速でマウス動かしたときにイベントが追い付かないとはみ出してしまったり、
まぁもっといろいろやりようはある気がするけど。
マウスクリック時のイベントと幅と高さをhtml要素にくっ付けて保持しておいて、
マウスが動いたらそれらから差分取って幅と高さの調整。
マウスボタンが離されたら解除。
マウスが画像からはみ出しても解除。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>img resize</title>
</head>
<body>
<div>
<img id="img" src="img.png" />
</div>
<script type="text/javascript">
window.addEventListener("load", function() {
var img = document.getElementById("img");
img.onmousemove = function(e) {
if(e.target.dragStartEvent) {
e.target.width = e.target.dragStartWidth - e.target.dragStartEvent.x + e.x;
e.target.height = e.target.dragStartHeight - e.target.dragStartEvent.y + e.y;
}
e.preventDefault();
e.stopPropagation();
};
img.onmouseout = function(e) {
delete e.target.dragStartEvent;
};
img.onmousedown = function(e) {
e.target.dragStartEvent = e;
e.target.dragStartWidth = e.target.width;
e.target.dragStartHeight = e.target.height;
};
img.onmouseup = function(e) {
delete e.target.dragStartEvent;
};
}, false);
</script>
</body>
</html>