图片交互设计：动态放大与旋转功能实现-优快云博客

本文链接：https://blog.youkuaiyun.com/a649344475/article/details/120729029
功能描述：点击图片弹出并放大，点击弹出图片外顺时针旋转，鼠标滚动放大缩小，点击弹出图片关闭
<html>
<head>
<script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">

var base_scrollBar = 0;

function imgShow(outerdiv, innerdiv, bigimg, _this) {
    var rIndex = 0;
    var src = _this.attr("src"); //获取当前点击的pimg元素中的src属性
    $(bigimg).attr("src", src); //设置#bigimg元素的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
        }); //设置#innerdiv的top和left属性
        $(outerdiv).fadeIn("fast"); //淡入显示#outerdiv及.pimg
    });

    $(outerdiv).click(function() { // 点击图片外面旋转图片
        //$(this).fadeOut("fast");
        if (rIndex > 3) {
            rIndex = 0;
        }
        rIndex += 1;
        $(bigimg).css('transform', 'rotate(' + 90 * rIndex + 'deg)');
    });
    $(innerdiv).click(function() { // 点击图片淡出消失弹出层
        rIndex = -1;
        $(outerdiv).fadeOut("fast");
        window.scrollTo(0, base_scrollBar);
    });
}

function getScrollTop(){
    // 获取滚动条距离顶部位置
    var scrollTop=0;
    if(document.documentElement&&document.documentElement.scrollTop){
    scrollTop=document.documentElement.scrollTop;
    }else if(document.body){
    scrollTop=document.body.scrollTop;
    }
    return scrollTop;
}

$(function(){
    $(".pic").click(function(){
        var _this = $(this);//将当前的pimg元素作为_this传入函数
        $("#bigimg").css({'width': '100%', 'height': '100%'});
        imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
        base_scrollBar = getScrollTop();
    });
});

</script>

<script type="text/javascript">
// 向上滚动放大图片，向下滚动缩小图片
function picture_change(s){
    //var div = document.getElementById("innerdiv");
    if($("#outerdiv").css('display')=='block'){
        var tw = $("#bigimg").width(),th=$("#bigimg").height();
        var cw = $(window).width(),ch=$(window).height();
        if(tw>0 && th >0){
            $("#bigimg").width(tw*s);
            $("#bigimg").height(th*s);
            //div.style.left = div.style.left*(2-s);
            //div.style.top = div.style.top*(2-s);
            $("#innerdiv").css({'left': (cw-tw*s)/2+'px','top': (ch-th*s)/2+'px'});
        }
    }
}
   var scrollFunc = function (e) {
        e = e || window.event;
        if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
            if (e.wheelDelta > 0) { //当滑轮向上滚动时
                picture_change(1.1);
            }
            if (e.wheelDelta < 0) { //当滑轮向下滚动时
                picture_change(0.9);
            }
        } else if (e.detail) {  //Firefox滑轮事件
            if (e.detail> 0) { //当滑轮向下滚动时
               picture_change(0.9);
            }
            if (e.detail< 0) { //当滑轮向上滚动时
                picture_change(1.1);
            }
        }
    }
    /*IE、Opera注册事件*/
    if(document.attachEvent){
        document.attachEvent('onmousewheel',scrollFunc);
    }
    //Firefox使用addEventListener添加滚轮事件
    if (document.addEventListener) {//firefox
        document.addEventListener('DOMMouseScroll', scrollFunc, false);
    }
    //Safari与Chrome属于同一类型
    window.onmousewheel = document.onmousewheel = scrollFunc;

</script>
</head>
<body>
<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>
<div>
    <img height="100" width="100" src="c.jpg" class="pic"/>
  </div>
</body>
</html>
JS 图片放大缩小、旋转
