给大家分享一个基于JQuery实现的图片拖拽缩放特效，效果如下：
实现代码如下，欢迎大家复制粘贴。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>基于JQuery实现的图片拖拽缩放特效</title>
<style type="text/css">
#box {
width: 200px;
height: 100px;
cursor: move;
position: absolute;
top: 30px;
left: 30px;
background-color: #FFF;
border: 1px solid #CCCCCC;
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
background: url('images/1.jpg');
background-size: 100% 100%;
}
#dot {
width: 8px;
height: 8px;
overflow: hidden;
cursor: se-resize;
position: absolute;
right: -3px;
bottom: -3px;
opacity: 0.8;
background-color: #09C;
border: 1px dashed #fff;
}
</style>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; top: 100px; left: 100px;">
<div id="dot"></div>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script>
$(function () {
$(document).mousemove(function (e) {
// 是否为目标移动
if (!!this.move) {
var position = !document.moveTarget ? {'x': 0,'y': 0} : document.moveTarget.position;
var callback = document.callDown || function () {
var top = e.pageY - position.y;
var left = e.pageX - position.x;
$(this.moveTarget).css({
'top': top,
'left': left
});
};
callback.call(this, e, position);
};
}).mouseup(function (e) {
if (!!this.move) {
var callback = document.callUp || function () {};
callback.call(this, e);
$.extend(this, {
'move': false,
'moveTarget': null,
'callDown': false,
'callUp': false
});
}
});
var $box = $('#box').mousedown(function (e) {
var offset = $(this).offset();
this.position = {
'x': e.pageX - offset.left,
'y': e.pageY - offset.top
};
$.extend(document, {
'move': true,
'moveTarget': this
});
}).on('mousedown', '#dot', function (e) {
var position = {
'w': $box.width(),
'h': $box.height(),
'x': e.pageX,
'y': e.pageY
};
$.extend(document, {
'move': true,
'callDown': function (e) {
var width = e.pageX - position.x + position.w;
var height = e.pageY - position.y + position.h;
$box.css({
'width': Math.max(30, width),
'height': Math.max(30, height)
});
}
});
return false;
})
});
</script>
</body>
</html>
