在页面上显示一张图片，当鼠标在图片上拖动的时候，移动图片的位置；向上滚动鼠标滚轮，放大图片；向下滚动鼠标滚轮，缩小图片。

在网页上实现这种交互效果通常使用HTML、CSS和JavaScript。你可以创建一个`<img>`标签来显示图片，并通过JavaScript添加事件监听器来处理拖拽和缩放操作。这里是一个简化的示例：

1. HTML部分：

<div id="image-container">
    <img src="your-image-url" alt="Your Image" id="image">
</div>

2. CSS部分，设置初始样式和基础的缩放比例：

#image-container {
    position: relative;
    overflow: hidden; /* 防止默认的滚动条 */
}

#image {
    width: 100%;
    height: auto;
}

3. JavaScript部分 (使用jQuery简化)：

$(document).ready(function() {
    var image = $('#image');
    
    // 拖动图片
    image.on('mousedown', function(event) {
        moveStartX = event.pageX - this.offsetLeft;
        moveStartY = event.pageY - this.offsetTop;
    });

    image.on('mousemove', function(event) {
        var newX = event.pageX - moveStartX;
        var newY = event.pageY - moveStartY;
        
        if (newX + image.width() > window.innerWidth) {
            newX = window.innerWidth - image.width();
        }
        if (newY + image.height() > window.innerHeight) {
            newY = window.innerHeight - image.height();
        }
        
        image.css({
            left: newX,
            top: newY
        });
    });

    // 鼠标滚轮缩放
    $(window).on('wheel', function(event) {
        var delta = event.originalEvent.wheelDelta / 120; // 负数代表向下滚动

        image.css('transform', 'scale(' + (1 + delta) + ')');
    });
});