web前端页面点击图片预览及大小缩放直接上代码效果如图：

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xxx</title>
    <style>
        #outerbox{
            width: 100%;
            height: 100%;
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 9;
        }
        #innerbox{
            position: absolute;
            z-index: 99;
        }
        #innerbox #bigimg {
            cursor: grab;
            border: 5px solid #ffffff;
        }
    </style>
    
    <!-- 引入jquery 这里是我放jq脚本的文件路径，可自行设定 -->
	<script src="__PUBLIC__/Js/jquery-1.7.1.js?v=1.0.0" type="text/javascript"></script>
</head>
<body>
	<div id="conbox">
		<p><img class="imgitem" src="/xxx/xxx.png" /></p>
		<p><img class="imgitem" src="/xxx/xxx.png" /></p>
		<p><img class="imgitem" src="/xxx/xxx.png" /></p>
	</div>

    <div id="outerbox">
        <div id="innerbox">
            <img id="bigimg" src="" />
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function(){
		var scaling = 1;    //图片的缩放比例: 1 为正常大小; 0 会消失，所以不能小于等于 
        // 点击图片放大
        $('.imgitem').each(function(){
            $(this).click(function(){
                var _this = $(this);    //将当前点击的图片元素作为_this传入函数
                showBigImg('#outerbox', '#innerbox', '#bigimg', _this)
            })
        })
        function showBigImg(outerbox, innerbox, bigimg, _this) {
            var src = _this.attr('src');    //获取当前点击图片元素的src属性
            $(bigimg).attr('src', src);     //设置#bigimg元素的src属性值

            /* 获取当前点击图片的真实大小，并显示弹出层及大图 */
            $(bigimg).attr('src',src).load(function(){
                var windowW = $(window).width();    //获取当前窗口宽度
                var windowH = $(window).height();   //获取当前窗口高度
                var realW = this.width;     //获取图片真实宽度
                var realH = this.height;    //获取图片真实高度
                var imgW, imgH;
                var scale = 0.8;    //当图片的真实宽高大于窗口的宽高时要进行的缩放尺寸
                if (realH > windowH*scale) {    //判断图片高度
                    imgH = windowH*scale;       //如大于窗口高度，图片高度进行缩放
                    imgW = imgH/realH*realW;    //等比例缩放宽度
                    if (imgW > windowW*scale) { //如宽度仍大于窗口宽度
                        imgW = windowW*scale;   //再对宽度进行缩放
                    }
                } else if (realW > windowW*scale) { //如图片高度合适，判断图片宽度
                    imgW = windowW*scale;       //图片宽度进行缩放
                    imgH = imgW/realW*realH;    //等比例缩放高度
                } else {    //如图片真实宽高都符合要求，宽高不变
                    imgW = realW;
                    imgH = realH;
                }
                $(bigimg).css('width',imgW);    //以最终的宽度对图片进行缩放
                var w = (windowW - imgW) / 2;   //计算图片与窗口的左右边距
                var h = (windowH - imgH) / 2;   //计算图片与窗口的上下边距
                $(innerbox).css({'top': h, 'left': w});
                $(outerbox).fadeIn('fast');     //淡入显示
                $('body').css('overflow-y','hidden');   //隐藏页面滚动条防止滚动缩放图片时影响页面滚动条位置

                // IE9, Chrome, Safari, Opera  -- 鼠标滚动监听       
                $('#bigimg').on("mousewheel",MouseWheelHandler);         
                // Firefox	-- 鼠标滚动监听         
                $('#bigimg').on("DOMMouseScroll",MouseWheelHandler);  
            })

            $(outerbox).click(function(){   //再次点击淡出消失弹窗
                $(this).fadeOut('fast');

                // 解绑 鼠标滚轮监听事件        
                $('#bigimg').off("mousewheel");         
                $('#bigimg').off("DOMMouseScroll");
                // 重置
                scaling = 1; 
                $('#bigimg').css('transform','scale(1)');
                $('body').css('overflow-y','auto');
            })
        }
    
        // 鼠标滚轮放大缩小
        function MouseWheelHandler(event){     
            var type = event.type;   
            if (type == 'DOMMouseScroll' || type == 'mousewheel') {         
                event.delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta / 120 : -(event.detail || 0) / 3;     
            }     
            
            if (event.delta == 1 || event.delta > 0) { //上滚 -- 放大  
                zoomImg('#bigimg','add')    
            } else if (event.delta == -1 || event.delta < 0) { //下滚 -- 缩小    
                zoomImg('#bigimg','cut')         
            } else {         
                console.log("鼠标滚轮放大缩小状态获取失败") 
            }
        }  
        // 缩放图片比例
        function zoomImg (img,type) {
            if (type == 'add') {    
                scaling += 0.1;
            } else {
                if (scaling < 0.5) {   //控制图片缩小到一定大小
                    return
                }
                scaling -= 0.1;
            }
            $(img).css('transform',`scale(${scaling})`);
        }
    })
</script>
</body>
</html>
效果如图：

在这里插入图片描述