图片缩放（可多图层叠加、隐藏显示、拖动）

$(function(){
    var $wrap = $(".layer-wrap"), // 外层包围
        $img = $img = $("img",$wrap), // 图层
        imgX, imgY;
    $wrap.addClass("layer-img-done"); // 载入完成视觉
    // 显示隐藏图层
    $(".J_selImg").change(function(){
        var $t = $(this),
            $simg = $img.filter("[data-id=" + $t.val() + "]");
        $simg.css({display:( this.checked ? "block" : "none" )});
    });
    // 设置外层包围宽高
    $wrap.css({width:$img.css("width"),height:$img.css("height")});
    // 获取外层包围宽高，计算缩放比率和移动范围时用
    var wrapw = $wrap.width(),
        wraph = $wrap.height();
    // 缩放事件
    $wrap[0].onmousewheel = function(e){
        var type = e.type,
            w = $img.width(), // 此时图片宽度
            h = $img.height(), // 此时图片高度
            power = 600, // 每次缩放时宽度加减的数值
            x = e.clientX - $wrap.offset().left, // 鼠标在外层包围中的x轴
            y = e.clientY - $wrap.offset().top, // 鼠标在外层包围中的y轴
            ar = w / ( w + power ), // 放大时宽度的比率，h除以这个比率可以得到放大后的高度
            dr = ( w - power ) / w, // 缩小时宽度的比率，h乘以这个比率可以得到缩小后的高度
            xr = x / wrapw, // 鼠标所在位置在外层包围中所占的x轴比率
            yr = y / wraph, // 鼠标所在位置在外层包围中所占的y轴比率
            ani = {}; // 保存执行animate时所用的参数
        // 当前还在运行缩放动画时直接退出此次缩放事件
        if ( $img.filter(":animated").length ){
            return false;
        }
        // 1：上滚 -1：下滚
        if (type == 'DOMMouseScroll' || type == 'mousewheel') {
            e.delta = (e.wheelDelta) ? e.wheelDelta / 120 : -(e.detail || 0) / 3;
        }
        // 放大
        if ( e.delta > 0 ) {
            ani.width = "+=" + power + "px";
        // 缩小
        } else if ( e.delta < 0 ) {
            // 如果缩小后的图片宽度小于外层包围宽度直接复位
            if( w - power < wrapw ){
                $img.animate({"width":"100%","left":"0","top":"0"});
                return false;
            }
            ani.width = "-=" + power + "px";
        } else {
            return false;
        }
        // 放大
        if ( e.delta > 0 ) {
            // 鼠标位置比率乘以放大所增加的宽高得到left、top需要减去的值
            ani.left = "-=" + xr * power + "px";
            ani.top = "-=" + ( yr * ( ( h / ar ) - h ) ) + "px";

            // 当新高度加上处理后的-top值小于外层包围高度时（会把图片往上拉太多导致下面面空白）
            // 说明top负值太多，重新计算用放大后的高度-外层包围的高度得到top的负值
            if( h / ar + trans(ani.top) + trans($img.css("top")) < wraph ){
                ani.top = "-" + ( h / ar - wraph ) + "px";
            }
             if( w / ar + trans(ani.left) + trans($img.css("left")) < wrapw ){
                ani.left = "-" + ( w / ar - wrapw ) + "px";
            }

        // 缩小
        } else {
            ani.left = "+=" + xr  * power + "px";
            ani.top = "+=" + ( yr * ( ( h / dr ) - h ) ) + "px";


            // 当新高度加上处理后的-top值小于外层包围高度（会把图片往下顶太多导致上面空白）
            // 或设置top值后大于0时
            if( ( h * dr + trans(ani.top) + trans($img.css("top")) < wraph ) || ( trans(ani.top) + trans($img.css("top")) > 0 ) ){
                ani.top = 0;
            }
            if( ( w * dr + trans(ani.left) + trans($img.css("left")) < wrapw ) || ( trans(ani.left) + trans($img.css("left")) > 0 ) ){
                ani.left = 0;
            }
        }

        $img.stop(true,true).animate(ani);
        return false;
    }

    $wrap.mousedown(function(e) {
        var x = e.offsetX,
            y = e.offsetY
        $wrap.data("move",true); // 可以移动标记
        // 记录下移动开始的鼠标位置
        $wrap.data("x",x);
        $wrap.data("y",y);

        imgX = e.pageX - parseInt($img.css("left"));
        imgY = e.pageY - parseInt($img.css("top"));
        $img.filter(":visible").fadeTo(20, 0.8);
        return false;
    });
    $(document).mousemove(function(e) {
        var x = e.offsetX,
            y = e.offsetY,
            ox = $wrap.data("x"),
            oy = $wrap.data("y"),
            left = e.pageX - imgX,
            top = e.pageY - imgY,
            width = $img.width(),
            height = $img.height();
        if ( $wrap.data("move") ) {
            // 为下一次触发移动更新上一次鼠标所在位置记录
            $wrap.data("x",x);
            $wrap.data("y",y);
            // 向左移
            if ( x < ox ) {
                if ( width + left < wrapw ){
                    return addE();
                }
            // 向右移
            } else if ( x > ox ) {
                if ( left > 0 ) {
                    return addE();
                }
            }

            // 向上移
            if ( y < oy ) {
                if ( height + top < wraph ){
                    return addE();
                }
            // 向下移
            } else if ( y > oy ) {
                if ( top > 0 ) {
                    return addE();
                }
            }
            // 图片新坐标
            $img.css({
                top: top,
                left: left
            });
            removeE();
        }
    }).mouseup(function() {
        $wrap.data("move",false);
        $img.filter(":visible").fadeTo(20, 1);
        removeE();
    });
    function trans(s){
        return +(s.replace(/[=|px]/g,""))
    }
    // 到达边界时的视觉效果
    function addE(){
        $wrap.css({borderColor:"#e78787",boxShadow:"0 0 10px #c00"});
        $wrap.data("move",false);
        return true;
    }
    // 去除到达边界视觉
    function removeE(){
        $wrap.css({borderColor:"#666",boxShadow:"none"});
    }
    // 复位
    $("#layerReset").click(function(){
        $img.animate({left:0,top:0,width:wrapw + "px"});
    });
})

转载自：https://blog.csdn.net/hoyche/article/details/80453884