myGzoom--图片弹出层（仿windows照片查看器，可缩放抓取移动）-CSDN博客

本文链接：https://blog.csdn.net/henuddy/article/details/19176359

1、实现点击class为pic的图片时弹出大图
2、可滚轮放大和随意移动。
3、能切换图片。
4、兼容ie7-11、FF、chrome、360.

html

<div id = "lightbox" style="padding:0;"></div>
<div id="picDiv"></div>
<a class="pic" href="javascript:;"><img/></a>
 .
 .
 .
<a class="pic" href="javascript:;"><img/></a>

css

/* 图片放大 */
.picDiv_show{
     width: 100%;
     height: 100%;
     position: absolute;
     z-index: 1000;
     opacity:1;
}
.zoom{
     overflow: hidden;
     cursor: pointer;
     border: 12px solid white;
     border-bottom:0;
     margin:auto;
     border-top-left-radius: 5px;
     left: 0;
}
.close{
     overflow:visible;
     z-index: 1001;
     cursor: pointer;
}
.empty{
     width: 0px;
     height: 0px;
}
.lightbox{
     width: 100%;
     height: 100%;
     background: url(../img/lightbox_bg.png);
     z-index: 1;
     position: absolute;
     left: 0;
     right: 0;
}
.picdiv{
     width: 100%;
     height: 100%;
     position: fixed;
     z-index:1000;
     opacity:1;
     left: 0;
}

gzoom.js

function big() {
    var src = $("#viewArea").attr("src");
    var tmpImage = new Image();
    tmpImage.src = src;
    var ow = tmpImage.width;
    var pw = $("#viewArea").width() * 1.1;
    if (pw > ow) {
    } else {
        $("#viewArea").attr("width", pw);
    }
}
function small() {
    var vw = $("#zoom04").width();
    var pw = $("#viewArea").width() * 0.9;
    if (pw < vw) {
        $("#viewArea").attr("width", vw);
    } else {
        $("#viewArea").attr("width", pw);
    }
}

var ctr = '<div id="ctr" style="margin-left:auto;margin-right:auto;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;'
    + 'text-align:center;height:36px;background:white;">'
    + '<a href="javascript:;" onclick="javascript:changePic(0);" title="上一张"><img src="../img/lightbox_prev.png"/></a>'
    + '<a id="small" style="cursor: pointer;margin:0 10px;" onclick="javascript:small();" title="缩小"><img src="../img/-.png"/></a>'
    + '<a id="big" onclick="javascript:big();" style="cursor: pointer;margin:0 10px;" title="放大"><img src="../img/+.png"/></a>'
    + '<a href="javascript:;" onclick="javascript:changePic(1);" title="下一张"><img src="../img/lightbox_next.png"/></a><a id="_top"></a>'
    + '</div>';

function changePic(change) {
    var picN = $("a[class^=pic]").children().length;
    var srcs = [];
    $("a[class^=pic]").children().each(function() {
        srcs.push($(this).attr("src"));
    });
    var cPic = $("#viewArea").attr("src");
    var cN = 0;
    var i = 0;
    for (; i < picN; i++) {
        if (cPic == srcs[i]){
            break;
        }
    }
    $("#picDiv").empty();
    if(change == 1){//下一张
        i++;
        if(i>=picN){
            i=0;
        }
    }else{//上一张
        i--;
        if(i<0){
            i=picN-1;
        }
    }
    var src = srcs[i];
    var tmpImage = new Image();
    tmpImage.src = src;
    // 浏览器的宽高
    var bh = $(window).height() * 0.9, bw = $(window).width() * 0.9;
    var scrollTop = $(document).scrollTop();
    // 图片的宽高
    var ph = tmpImage.height, pw = tmpImage.width;
    var sh = ph, sw = pw;
    if (ph > bh) {
        sh = bh - 36;
        sw = (sh * pw) / ph;
        if(sw>bw){
            sw = bw;
            sh = (sw * ph) / pw;
        }
    }
    if(sw<300){
        sw=300;
        if(pw !=0&&ph!=0){
            sh = sw * ph / pw;
        }else{
            sh = 300;
        }
    }
    // 与浏览器的上下距离
    var py = 0;
    if(ph < bh){
        py = (bh-sh)/2;
    }
    var picDivImage = '<div id="zoom04"><img name="viewArea" id="viewArea" src="'
        + src + '" alt="pic" title="" /></div>';
    $("#picDiv").append(picDivImage);
    $("#viewArea").attr("width", sw);
    $("#zoom04").addClass("zoom");
    $("#zoom04").css("width", sw);
    $("#zoom04").css("height", sh);
    var ctrW = sw + 24;
    $("#picDiv").append(ctr);
    $("#ctr").css("width",ctrW);
    $("#picDiv").prepend('<div title="关闭" style="margin:auto;margin-top:'+py+'px;left:0;text-align:right;'
        +'width:'+ctrW+'px;height:36px;"><img class="close" style="width:36px;height:36px;overflow:hidden;'
        +'position:relative;top:20px;right:-12px;" src="../img/x.png" /></div>');
    picMove();
    //加入Mozilla的事件listerner
    if(window.addEventListener){
        document.addEventListener('DOMMouseScroll',picZoom, false);
        //for IE/OPERA etc
        document.onmousewheel = picZoom;
    }
    window.onmousewheel=document.onmousewheel=picZoom;
    $(".close").click(function() {
        closeLightBox();
    });
}

$(function() {
    $("a[class^=pic]").click(
        function() {
            var ie6=!-[1,]&&!window.XMLHttpRequest;
            if(ie6){
                return null;
            }
            var src = $(this).children().attr("src");
            var tmpImage = new Image();
            tmpImage.src = src;
            // 浏览器的宽高
            var bh = $(window).height() * 0.9, bw = $(window)
                .width() * 0.9;
            var scrollTop = $(document).scrollTop();
            $("html").css("height",bh);
            // 图片的宽高
            var ph = tmpImage.height, pw = tmpImage.width;
            //显示框的宽高
            var sh = ph, sw = pw;
            if (ph > bh) {
                sh = bh-36;//预留图片切换按钮空间
                sw = sh * pw / ph;
                if(sw>bw){
                    sw = bw;
                    sh = sw * ph / pw;
                }
            }
            if(sw<300){
                sw=300;
                if(pw !=0&&ph!=0){
                    sh = sw * ph / pw;
                }else{
                    sh = 300;
                }
            }
            // 与浏览器的上下距离
            var py = 0;
            if(ph < bh){
                py = (bh - sh) / 2;
            }
            var picDiv = '<div id="zoom04"><img name="viewArea" id="viewArea" src="'
                + src + '" alt="pic" title="" /></div>';
            $("#lightbox").removeClass("empty");
            $("#picDiv").removeClass("empty");
            $("html").css("overflow","hidden");
            $("#lightbox").addClass("lightbox");
            $("#lightbox").css("top",scrollTop);
            $("#picDiv").addClass("picdiv");
            $("#picDiv").append(picDiv);
            $("#viewArea").attr("width", sw);
            $("#zoom04").addClass("zoom");
            $("#zoom04").css("width", sw);
            $("#zoom04").css("height", sh);
            var ctrW = sw + 24;
            $("#picDiv").append(ctr);
            $("#ctr").css("width",ctrW);
            $("#picDiv").prepend('<div title="关闭" style="margin:auto;margin-top:'+py+'px;left:0;text-align:right;'
                +'width:'+ctrW+'px;height:36px;"><img class="close" style="width:36px;height:36px;overflow:hidden;'
                +'position:relative;top:20px;right:-12px;" src="../img/x.png" /></div>');
            picMove();
            //加入FF浏览器的事件listerner
            if(window.addEventListener){
                document.addEventListener('DOMMouseScroll',picZoom, false);
                //for IE/OPERA etc
                document.onmousewheel = picZoom;
            }
            //其他浏览器
            window.onmousewheel=document.onmousewheel=picZoom;
            $(".close").click(function() {
                closeLightBox();
            });
        });
});
document.onkeydown = function(e) {
    var keyCode = 0;
    if(window.event){//IE支持event事件
        keyCode = event.keyCode;
    }else{
        keyCode=e.which;//FF支持传入参数
    }
    if(keyCode == 13||keyCode == 27){
        closeLightBox();
    }
}
//鼠标滚轮事件
function picZoom(event){
    var scrollValue = 0;
    if (!event) event = window.event;
    // normalize the delta
    if (event.wheelDelta) {
        // IE and Opera
        scrollValue = event.wheelDelta;
    }else if (event.detail){
        // W3C (FF)
        scrollValue = -event.detail;
    }
    if(scrollValue>0){
        big();
    }else{
        small();
    }
}
function closeLightBox(){
    $("html").css("overflow","");
    $("#lightbox").removeClass("lightbox");
    $("#lightbox").addClass("empty");
    $("#picDiv").removeClass("picdiv");
    $("#picDiv").addClass("empty");
    $("#picDiv").empty();
    $("#lightbox").empty();
    $("body").css("opacity", "1");
}
//图片的放大移动
function picMove() {
    var pp = document.getElementById("viewArea");
    var vv = document.getElementById("zoom04");

    var ie = document.all;
    var nn6 = document.getElementById && !ie;
    var isdrag = false;
    var y, x;
    var st, sl;
    function initDrag(e) {
        var oDragHandle = nn6 ? e.target
            : event.srcElement;
        isdrag = true;
        x = nn6 ? e.clientX : event.clientX;
        y = nn6 ? e.clientY : event.clientY;

        st = vv.scrollTop;
        sl = vv.scrollLeft;

        document.onmousemove = moveMouse;
        return false;
    }
    function moveMouse(e) {
        if (isdrag) {
            var mouseX = nn6 ? e.clientX
                : event.clientX;
            var mouseY = nn6 ? e.clientY
                : event.clientY;

            vv.scrollTop = st + (y - mouseY);
            vv.scrollLeft = sl + (x - mouseX);
            return false;
        }
    }
    pp.onmousedown = initDrag;
    pp.onmouseup = function() {
        isdrag = false;
    };
}