EasyUI弹出框,随滚动条移动 弹出图片预览自动缩略

来源:互联网 发布:linux shell启动jar包 编辑:程序博客网 时间:2024/06/05 00:47



随滚动条移动


$(document).scroll(function () {
        if (imgTemp != "") {
            $("#divShowImage").dialog({ top: $(document).scrollTop() + ($(window).height() - clientH) * 0.5 });
        }
    })


图片自动缩略

function adjustImgSize(img, boxWidth, boxHeight) { 
        var tempImg = new Image();
        tempImg.src = img.attr('src');
        var imgWidth = tempImg.width;
        var imgHeight = tempImg.height;
        if ((boxWidth / boxHeight) >= (imgWidth / imgHeight)) {
            img.width((boxHeight * imgWidth) / imgHeight);
            img.height(boxHeight);
            var margin = (boxWidth - img.width()) / 2;
            img.css("margin-left", margin);
        }
        else { 
            img.width(boxWidth);
            img.height((boxWidth * imgHeight) / imgWidth);
            var margin = (boxHeight - img.height()) / 2;
            img.css("margin-top", margin);
        }
    };



JS调用自动缩放

function ShowImage(id) {
        var src = "../Attachment/ShowBitFiles.aspx?Id=" + id + "&OpeType=0";
        
        $("#divShowImage").html("<img id='_img' src='" + src + "'/>");
        $('#_img').load(function () {
            adjustImgSize($(this), $(this).parent().width(), $(this).parent().height());
        })
        imgTemp = "1";
        $('#divShowImage').dialog({
            title: "图片预览",
            width: clientH,
            height: clientH,
            modal: true
        });
    }

0 1
原创粉丝点击