为了实现一个可放大和缩小的图片查看功能，可以通过以下几种方式来实现。下面是一种常见的方法，使用鼠标滚轮进行缩放，同时允许用户拖动以移动图片。

我们将对原有的模态框代码进行一些修改，并添加适当的 CSS 和 JavaScript 代码：

HTML & JavaScript

for (let i = 0; i < dialogData.data.attachmentList.length; i++) {
    const fileUrl = dialogData.data.attachmentList[i].fileUrl;
    const link = $('<a class="link view">').attr('href', fileUrl).text(dialogData.data.attachmentList[i].fileName);
    link.on('click', function (e) {
        e.preventDefault();
        e.stopPropagation();
        let imageUrl = '../d/exemptionReduction/selectPictureById?id=' + dialogData.data.attachmentList[i].id;
        let modalHtml = `
            <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body">
                            <div id="imageContainer" style="overflow: hidden; position: relative;">
                                <img id="imagePreview" src="${imageUrl}" alt="Image Preview" style="max-width: 100%; cursor: move;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>`;
        $('body').append(modalHtml);
        $('#imageModal').modal('show');
        // Zoom functionality
        let scale = 1;
        
        const imgElement = $('#imagePreview');
        $('#imageContainer').on('wheel', function(e) {
            e.preventDefault();
            if (e.originalEvent.deltaY < 0) {
                scale *= 1.1; // Zoom in
            } else {
                scale /= 1.1; // Zoom out
            }
            imgElement.css('transform', `scale(${scale})`);
        });
        // Drag functionality
        let isDragging = false;
        let startX, startY;
        imgElement.on('mousedown', function(e) {
            isDragging = true;
            startX = e.pageX - imgElement.position().left;
            startY = e.pageY - imgElement.position().top;
            $(this).css('cursor', 'grabbing');
        });
        $(document).on('mouseup', function() {
            isDragging = false;
            imgElement.css('cursor', 'move');
        });
        $(document).on('mousemove', function(e) {
            if (isDragging) {
                let xPos = e.pageX - startX;
                let yPos = e.pageY - startY;
                imgElement.css({ top: yPos + 'px', left: xPos + 'px' });
            }
        });
        $('#imageModal').on('hidden.bs.modal', function () {
            $('#imageModal').remove();
        });
    });
    self.uploadImageBtn.after(link).hide();
}

CSS（可以添加到你的样式表中）

#imageContainer {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}
#imagePreview {
    transition: transform 0.2s ease; /* 添加平滑过渡效果 */
}

实现说明：

1. 缩放：通过监听 wheel 事件，动态调整图片的 scale 属性，实现缩放功能。
2. 拖动：通过监听 mousedown, mouseup, 和 mousemove 事件，允许用户在按下鼠标时拖动图片。
3. CSS：为图像容器设置样式以居中显示，并使其能够响应大小变化。

这样，你就可以在弹出的模态框中点击和拖拽以调整图像的位置，同时使用滚轮来控制图像的缩放。确保在你的项目中包含 jQuery 和 Bootstrap 的相关库，以支持上述代码正常运行。


内容由零声教学AI助手提供，问题来源于学员提问