JQuery是一個流行的JavaScript庫，它可以用于動態(tài)網頁開發(fā)。其中，鼠標拖動圖片放大縮小是一種常見的交互效果。下面介紹如何使用JQuery實現(xiàn)該效果。

$(function() {
// 鼠標按下事件
$('#image').mousedown(function(event) {
// 獲取圖片寬高
var width = $(this).width();
var height = $(this).height();
// 記錄鼠標按下時的坐標和圖片位置
var startX = event.pageX;
var startY = event.pageY;
var offsetX = $(this).offset().left;
var offsetY = $(this).offset().top;
// 鼠標移動事件
$(document).mousemove(function(event) {
// 計算鼠標移動距離
var moveX = event.pageX - startX;
var moveY = event.pageY - startY;
// 判斷鼠標是否移動
if (moveX !== 0 || moveY !== 0) {
// 計算圖片新位置
var left = offsetX + moveX;
var top = offsetY + moveY;
// 設置圖片新位置
$('#image').offset({left: left, top: top});
}
});
// 鼠標松開事件
$(document).mouseup(function(event) {
// 取消鼠標移動事件
$(document).off('mousemove');
$(document).off('mouseup');
// 鼠標移動距離小于10像素，判斷為點擊事件
if (Math.abs(event.pageX - startX)< 10 && Math.abs(event.pageY - startY)< 10) {
// 放大圖片
if (width< 400) {
width *= 2;
height *= 2;
}
// 縮小圖片
else {
width /= 2;
height /= 2;
}
// 設置圖片新尺寸
$('#image').width(width);
$('#image').height(height);
}
});
});
});

代碼中，首先使用鼠標按下事件獲取圖片的寬高、鼠標按下時的坐標和圖片位置，同時監(jiān)聽鼠標移動事件，當鼠標移動時，計算圖片新位置并設置圖片新位置。當鼠標松開時，判斷鼠標移動距離是否小于10像素，如果是，則判斷為點擊事件，根據(jù)圖片當前尺寸放大或縮小圖片，并設置圖片新尺寸。

通過這段代碼，我們可以簡單實現(xiàn)鼠標拖動圖片放大縮小的交互效果。