jQuery实现点击图片放大,鼠标滑轮控制缩放

最新推荐文章于 2021-06-03 02:33:41 发布

小鸡向前冲

最新推荐文章于 2021-06-03 02:33:41 发布

阅读量746

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_48368649/article/details/112001528

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这是一个使用JavaScript和jQuery实现的网页图片点击放大显示的功能。当用户点击图片时，会在屏幕中央弹出一个全屏黑色半透明背景的div，内含放大的图片，支持滚轮缩放。代码中包含了图片加载、窗口大小适配以及鼠标滚轮缩放的逻辑。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>测试</title>
</head>
<body>
    <div align="center">
        <img class="pimg" src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1078861629,3747050294&fm=26&gp=0.jpg" height="130" width="100">
    </div>
    <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
        <div id="innerdiv" style="position:absolute;">
            <img id="bigimg" style="border:5px solid #fff;" src="" />
        </div>
    </div>
</body>
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(function(){
        $(".pimg").click(function(){
            var _this = $(this);
            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
        });
    });
    function zoomImg(o) {
        var zoom = parseInt(o.style.zoom, 10) || 100;
        zoom += event.wheelDelta / 2;
        if (zoom > 0) o.style.zoom = zoom + '%';
    }

    function imgShow(outerdiv, innerdiv, bigimg, _this){
        var src = _this.attr("src");
        $(bigimg).attr("src", src);

        $("<img/>").attr("src", src).load(function(){
            var windowW = $(window).width();
            var windowH = $(window).height();
            var realWidth = this.width;
            var realHeight = this.height;
            var imgWidth, imgHeight;
            var scale = 0.8;

            if(realHeight>windowH*scale) {
                imgHeight = windowH*scale;
                imgWidth = imgHeight/realHeight*realWidth;
                if(imgWidth>windowW*scale) {
                    imgWidth = windowW*scale;
                }
            } else if(realWidth>windowW*scale) {
                imgWidth = windowW*scale;
                imgHeight = imgWidth/realWidth*realHeight;
            } else {
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(bigimg).css("width",imgWidth);

            var w = (windowW-imgWidth)/2;
            var h = (windowH-imgHeight)/2;
            $(innerdiv).css({"top":h, "left":w});
            $(outerdiv).fadeIn("fast");

            $("img").bind("mousewheel",
            function() {
                zoomImg(this);
                return false;
            });
        });

        $(outerdiv).click(function(){
            $(this).fadeOut("fast");
        });
    }
</script>
</html>