javascript - 当窗口调整大小效果不佳时更改框的 css

Question

我尝试编写一个脚本，当我单击调整大小的画廊图像时；图像显示在屏幕中间的框中。但是如果调整窗口大小并且“原始”图像的宽度大于框的宽度；盒子的CSS必须改变。

所以如果框的宽度是<图像的宽度

$('#box').css('left', '0%');
$('#box').css('transform','translate3d(0%,0,0)');

其他

$('#box').css('left', '50%');
$('#box').css('transform','translate3d(-50%,0,0)');

这是js:

$(document).ready(function () { 
    $('#boximmagini img').click(function(){
        $("#immagine img:last-child").remove()
        var source= $(this).attr('src'); 
        var i2= new Image();
        i2.onload = function() {
            var largimage= i2.width;         
        };
        i2.src = source;

        $('#immagine').append("<img src="+source+" style='width: 100%;border-radius:10px; margin-top:30px'/>")
        $('#overlay').fadeIn('fast');
        $('#box').fadeIn('slow');
        var largbox=$('#box').width();

        if(largbox< i2.width){
            $('#box').css('left', '0%');
            $('#box').css('transform','translate3d(0%,0,0)');
        } 
        else {
            $('#box').css('left', '50%');
            $('#box').css('transform','translate3d(-50%,0,0)');
        }        
        $(window).resize(function() {
            var resizelargbox= $('#box').width(); 
            if (largbox != resizelargbox) {
                largbox = resizelargbox;
                var Laggiungi= '<span style="color: #fff">'+largbox+'</span><br>';
                $(Laggiungi).appendTo('#larghezza');
                if(largbox< i2.width){
                    $('#box').css('left', '0%');
                    $('#box').css('transform','translate3d(0%,0,0)');
                } 
                else {
                    $('#box').css('left', '50%');
                    $('#box').css('transform','translate3d(-50%,0,0)');
                }
            }
        }); 
    });

    $(".chiudi").click(function(){
        $('#overlay').fadeOut('fast');
        $('#box').hide();
    });

    //chiusura emergenza
    $("#overlay").click(function(){
        $(this).fadeOut('fast');
        $('#box').hide();
    });
});

这是 Jsfiddle http://jsfiddle.net/tvafw5Ls/

问题是当盒子的宽度>图像的宽度时，他开始突然出现，就好像代码不知道盒子的实际宽度一样。通过跨度宽度** **中添加的值，您可以在每次调整窗口大小时看到框的宽度。如果您点击左侧第一张图片；一旦窗口超过图像的宽度(其自然宽度为 488 px)，他就会开始出现问题。

希望你能帮助我。

谢谢

Answer 1

这是解决方案:

http://jsfiddle.net/tvafw5Ls/7/

我更改了过去的代码，并且研究了图像的宽度

$(document).ready(function () {
  $('#boximmagini img').click(function () {
    $("#immagine img:last-child").remove()
    var source = $(this).attr('src');
    var i2 = new Image();
    i2.onload = function () {
        var largimage = i2.width;
    };
    i2.src = source;

    $('#immagine').append("<img src=" + source + " style='width:100%; border-radius:10px; margin-top:30px'/>")
    $('#overlay').fadeIn('fast');
    $('#box').fadeIn('slow');
    //
    $('#box').css('left', '0%');
    $("#immagine img:last-child").css('width', '100%');
    //
    var widthimage = $("#immagine img:last-child").width();

    if (widthimage < i2.width) {
        $('#box').css('left', '0%');
        $('#box').css('transform', 'translate3d(0%,0,0)');
        $("#immagine img:last-child").css('width', '100%');
    } else {
        $('#box').css('left', '50%');
        $("#immagine img:last-child").css('width', '');
        $('#box').css('transform', 'translate3d(-50%,0,0)');
    }



    $(window).resize(function () {
         $('#box').css('left', '0%');
        $("#immagine img:last-child").css('width', '100%');
        var widthimage = $("#immagine img:last-child").width();           
        if (widthimage < i2.width) {
            $('#box').css('left', '0%');
            $("#immagine img:last-child").css('width', '100%');
            $('#box').css('transform', 'translate3d(0%,0,0)');

        } else {
            $('#box').css('left', '50%');
            $("#immagine img:last-child").css('width', '');
            $('#box').css('transform', 'translate3d(-50%,0,0)');

        }

    });
});

$(".chiudi").click(function () {
    $('#overlay').fadeOut('fast');
    $('#box').hide();
});

//chiusura emergenza
$("#overlay").click(function () {
    $(this).fadeOut('fast');
    $('#box').hide();
});

});