jquery点击图片放大预览，且鼠标滚轮缩放

Html

Css

#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;
	border-radius:10px;
}

$(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})`);
    }
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

jquery点击图片放大预览，且鼠标滚轮缩放



代码描述：web页面点击图片预览图片，控制鼠标滚轮缩放图片大小

更新时间：2021-05-08 17:15:12
web端页面点击图片预览图片，显示图片原始大小，滑动鼠标滚轮可放大或缩小图片；
当前放大的最大值无上限，缩小的最小值为原始比例的0.5，放大的最大值比例和缩小的最小值比例可自行设置；
再次点击图片或其它区域都可隐藏弹窗

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

MyNameIsHZJ

相关代码

jquery点击图片放大预览，且鼠标滚轮缩放

最新