javascript - Jquery图像滑块从右到左完美地工作，但从左到右我无法让它居中

Question

我正在研究我的摄影作品集展示/画廊滑块。

我已经有一半工作原型，但我无法终生弄清楚为什么它将图像完美地集中在一个方向而不是另一个方向：S

有趣的是，如果我调整窗口大小并第二次调用我的 move_slide() 函数，它会转到正确的位置......那么发生了什么？任何人都可以阐明吗？

我相信这是一个相当古怪的问题。所以一双新鲜的眼睛可以帮我分配。

到目前为止我的代码：

jQuery(window).load(function() {


    //
    function set_slide_width(add_extra) {
        if (!add_extra) {add_extra = 0;}
        var slide_width = 0;
        $("#barely_slide article img").each(function(){
            slide_width += $(this).outerWidth();
        });
        $("#barely_slide article").css("width",slide_width + add_extra);
    }
    //
    set_slide_width();


    //
    function move_slide() {
        var focus_margin = 0;
        var img_real_height = 0;
        //
            var add_extra = 0;
            //var prev_deduct = 0;
        //
        $("#barely_slide article img").each(function(){
            //
                //if ($(this).attr("class") == "previous") {
                //  var theImage = new Image();
                //  theImage.src = $(this).attr("src");
                //  var img_real_width = theImage.width;
                //  var img_real_width_padding = img_real_width + ($(this).outerWidth() - $(this).width());
                //  prev_deduct = img_real_width_padding - $(this).outerWidth();
                //}
            //
            if ($(this).attr("class") == "focus") {
                    var theImage = new Image();
                    theImage.src = $(this).attr("src");
                    var img_real_width = theImage.width;
                    var img_real_width_padding = img_real_width + ($(this).outerWidth() - $(this).width());
                    img_real_height = theImage.height;
                    //
                        add_extra = img_real_width_padding - $(this).outerWidth();
                    //
                focus_margin += img_real_width_padding / 2;
                return false;
            }
            focus_margin += $(this).outerWidth();
        });
        //
            set_slide_width(add_extra);
        //
        var container_center = $("#barely_slide").outerWidth() / 2;
        var offset = container_center - focus_margin;
        //console.dir(offset);
        $("#barely_slide article").animate({"margin-left": offset }, "fast");
            //
            var img_height_offset = (img_real_height / 2) - 150;
            $(".focus").animate({"height":img_real_height,"margin-top":-img_height_offset}, "fast");
    }
    //
    move_slide();


    //
    var resize_timeout;
    $(window).resize(function() {
        clearTimeout(resize_timeout);
        resize_timeout = setTimeout(function(){    
            move_slide();
        },100);
    });


    //
    $("#barely_slide article img").on("click", function(){
        if ($(this).attr("class") == "focus") {return false;}

        //
            $("#barely_slide article img").removeClass("previous");
            $("#barely_slide article .focus").addClass("previous");
            $(".previous").animate({"height":300,"margin-top":0}, "fast");
        //

        $("#barely_slide article .focus").removeClass("focus");
        $(this).addClass("focus");
        move_slide();
        return false;
    });

});

score 1 · Accepted Answer

我浏览了您的代码，发现您在第一张图片之前正在做一些数学运算（带有班级的focus那个被调整大小。这会影响您的数学运算。我看到当单击已经聚焦的图像时，正确的包含正在移动，但是不是左派这是解决问题的关键。

你正在移动你的图像，它会居中。但是随后，您调整了最后一张聚焦图片的大小，这就是将您的内容向左移动的原因。

我最快的解决方案是在第一次 img 调整大小后调用计算。见这里：http: //jsfiddle.net/K88Yg/4/

这可能不是您想要的效果，我只是想向您展示问题所在。

我的解决方法只是在 animate 之后调用“移动”函数complete。

$("#barely_slide article img").on("click", function(){
    var $this = $(this);
    $(".focus").animate({"height":300,"margin-top":0}, {
        duration : "fast",
        complete: function(){
            $("#barely_slide article img").removeAttr("class");
            $this.addClass("focus");
            move_slide();
        }
    });
    return false;
});

请注意，在complete函数之前，您需要将this值保存到变量中。

编辑：我做了 2 或 3 次破解来达到你想要的结果。这里的小提琴：http: //jsfiddle.net/K88Yg/5/

这里列出了我所做的更改：

功能点击：

$("#barely_slide article img").removeClass("previous");
$("#barely_slide article .focus").addClass("previous");
var oldStyle = $(".previous").attr('style');
$(".previous").css({"height":'300px',"margin-top":0}  )  
$("#barely_slide article .focus").removeClass("focus");
$(this).addClass("focus");
move_slide();
$(".previous").attr('style', oldStyle)  
$(".previous").animate({"height":'300px',"margin-top":0}, "fast");

我正在保存当前的 CSS，然后在计算之前更改它们。计算后，我正在设置旧的 CSS 并做动画。

通过这样做，我有一个小故障，有时最后一张图像在包装。发现那是函数add_extra。所以我保存了旧的额外内容并做了一个小条件：

if(old_extra > add_extra)set_slide_width(add_extra);

var container_center = $("#barely_slide").outerWidth() / 2;
var offset = container_center - focus_margin;
$("#barely_slide article").animate({"margin-left": offset }, {duration : "fast", complete : function(){
    if(old_extra < add_extra)set_slide_width(add_extra);
}});

如果旧的附加值更高，它会在动画之前更改宽度。如果它较低，它会等到动画完成。不再有包装故障。

EDIT2：检查Chango 的答案。他做了数学计算，允许你做与上面的代码完全相同的事情，但代码更少。

score 1 · Accepted Answer

好的，解决方法很简单，问题出在这个方法上：

$("#barely_slide article img").on("click", function(){
    if ($(this).attr("class") == "focus") {return false;}

    //
        $("#barely_slide article img").removeClass("previous");
        $("#barely_slide article .focus").addClass("previous");
        $(".previous").animate({"height":300,"margin-top":0}, "fast");
    //

    $("#barely_slide article .focus").removeClass("focus");
    $(this).addClass("focus");
    move_slide();
    return false;
});

问题是您在 $(".previous") 完成动画之前移动幻灯片。后果是如果“.previous”在“.focus”的左边，那么focus_margin计算错误。

这是解决方案：

$("#barely_slide article img").on("click", function(){
    if ($(this).attr("class") == "focus") {return false;}

    $("#barely_slide article img").removeClass("previous");
    $("#barely_slide article .focus").addClass("previous");

    var $image = $(this);
    $(".previous").animate({"height":300,"margin-top":0}, "fast",
        function () {
          $("#barely_slide article .focus").removeClass("focus");
          $image.addClass("focus");
          move_slide();
        });


    return false;
});

这是带有其他一些修改的 jsfiddle：http: //jsfiddle.net/JQaLB/2/

修改：

$(this).hasClass("focus")

好于

$(this).attr("class") == "focus"

和：

add_extra = add_extra || 0;

好于

if (!add_extra) {add_extra = 0;}

稍后我将进行编辑以添加更多详细信息。

score 1 · Accepted Answer

我找到了另一种效果更好的解决方案。您只需要更改move_slide功能：

function move_slide() {
  var focus_margin = 0;
  var img_real_height = 0;
  var add_extra = 0;
  $("#barely_slide article img").each(function(){
    if ($(this).hasClass("focus")) {
      var theImage = new Image();
      theImage.src = $(this).attr("src");
      var img_real_width = theImage.width;
      var img_real_width_padding = img_real_width + ($(this).outerWidth() - $(this).width());
      img_real_height = theImage.height;

      add_extra = img_real_width_padding - $(this).outerWidth();

      focus_margin += img_real_width_padding / 2;
      return false;
    /***************** This is where the changes begin *************************/
    } else if ($(this).hasClass("previous")) {
      // If has the previous class, calculate the width with a height of 300.
      var shrinked_width = 300 *  $(this).width() / $(this).height();
      // add the padding.
      var img_width_width_padding = shrinked_width + ($(this).outerWidth() - $(this).width());
      // then update the focus_margin
      focus_margin += img_width_width_padding;
    } else {
      focus_margin += $(this).outerWidth();
    }
    /***************** This is where the changes end ***************************/
  });
  set_slide_width(add_extra);

  var container_center = $("#barely_slide").outerWidth() / 2;
  var offset = container_center - focus_margin;

  $("#barely_slide article").animate({"margin-left": offset }, "fast");

  var img_height_offset = (img_real_height / 2) - 150;
  $(".focus").animate({"height":img_real_height,"margin-top":-img_height_offset}, "fast");
}

这是jsfiddle：http: //jsfiddle.net/JQaLB/4/

javascript - Jquery图像滑块从右到左完美地工作，但从左到右我无法让它居中

3 回答 3

Related

Reference