图片预览，且鼠标滚轮缩放

最新推荐文章于 2024-06-28 15:21:24 发布

凛冬深夜

最新推荐文章于 2024-06-28 15:21:24 发布

阅读量359

点赞数

分类专栏： html前端基础文章标签： css js html jquery

本文链接：https://blog.csdn.net/qq_41967796/article/details/117821651

版权

html前端基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

图片预览，且鼠标滚轮缩放

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width">
  <title>预览图片-滚轮缩放</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;
	border-radius:10px;
}

  </style>
  
 
</head>
<body>
   
<div id="conbox">
    <p><img class="imgitem" src="https://www.jq22.com/img/cs/500x300-1.png" alt="My Image"></p>
    <p><img class="imgitem" src="https://www.jq22.com/img/cs/500x300-2.png" alt="My Image"></p>
</div>

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

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

<script >

$(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>

凛冬深夜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
图片预览，且鼠标滚轮缩放

图片预览，且鼠标滚轮缩放<!DOCTYPE html><head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width"> <title>预览图片-滚轮缩放</title> <style>
复制链接

扫一扫