基于jq放大镜的原型扩展

Posted 2020-09-17

传入参数图片源地址及放大倍数

//创建节点
$.fn.scale = function(json) {//json.src json.scale
    $(this).html("");
    var width = $(this).width();
    var height = $(this).height();
    //创建图片
    var img = $("<img>");
    $(this).append(img);
    img.css({
            "width": width,
            "height": height
        }).attr("src", json.src)
        //创建图片滤镜
    var div = $("<div>");
    $(this).append(div);
    div.addClass("imgZoom").css({
        "width": width / json.scale,
        "height": height / json.scale,
        "backgroundColor": "rgba(0,0,0,0.2)",
        "position": "absolute"
    }).hide();
    //创建大图显示区域；
    //创建图片滤镜
    var div = $("<div>");
    $(this).append(div);
    div.addClass("imgBigWrap").css({
        "width": width,
        "height": height,
        "position": "absolute",
        "overflow": "hidden",
        "top": 0,
        "left": width
    }).hide();

    //创建大图
    var img = $("<img>");
    div.append(img);
    img.addClass("imgBig").css({
        "width": width * json.scale,
        "height": height * json.scale,
        "position": "absolute",
    }).attr("src", json.src)

    $(this).mousemove(function(e) { //绑定事件
        //创建移动事件
        var evt = window.event || e;
        $(".imgZoom").show();
        $(".imgBigWrap").show();
        var x = evt.clientX - $(this).offset().left - $(".imgZoom").width() / 2;
        var y = evt.clientY - $(this).offset().top - $(".imgZoom").height() / 2;
        $(".imgZoom").css({
            "left": Math.max(Math.min(x, width - $(".imgZoom").width()), 0),
            "top": Math.max(Math.min(y, height - $(".imgZoom").height()), 0)
        });
        $(".imgBig").css({
            "left": -$(".imgZoom").position().left * json.scale,
            "top": -$(".imgZoom").position().top * json.scale
        })
    })
    $(this).mouseout(function() {
        $(".imgZoom").hide();
        $(".imgBigWrap").hide();
    })
}