Question

我有一个巨大的可滚动区域。在一个部分中，我有一个缩略图网格。单击时，拇指被克隆并动画到屏幕的中心，但它会动画到整个区域的中心，而不是您正在查看的区域; e，已滚动到的区域。如何让它动画到可视区域的中心？ JQuery代码如下：

var $article = $('#news-articles .news-article').eq(index);
var $articleClone = $article.clone(true);  // clone the article for the corresponding link

// Create the expanded item container
var $expandedItem = $('<div>', {
id: 'item-expanded',
css: {
      width: 188,
  height: 188,
  background: '#fff',
  position: 'absolute',
  zIndex: 999
  },    
}); 

$expandedItem.append($img);  //Add the cloned image to the expanded item container              

$('body').append($expandedItem);  //Add the shaded overlay and the expanded item to the body

//Animate the size of the expanded item
    $expandedItem.animate({
        width: 400,
        height: 400,
        left: $(window).width()/2,
        top: $(window).height()/2,
        marginTop: -400/2,
        marginLeft: -400/2,
        }, {
            duration: DDBR.constant.ITEM_ANIMATION_SPEED,
            easing: DDBR.constant.ITEM_ANIMATION_EASING,
            queue: false,
            complete: function() {
                animFinished = true;
                if (animFinished) {
                    imageFade();                            
                    }
                }
            });

请注意我已尝试将$ expanded item的定位更改为'fixed'。但是，这会产生一个问题，因为它需要使用拇指的“偏移”从我获得的点击缩略图的位置进行动画处理。更改$ expandedItem的位置会导致它在首次加载时从拇指的位置进行动画处理，而不是在页面滚动后的当前位置。

希望一切都有意义。对此的任何帮助将不胜感激。

提前致谢。

Answer 1

您是否尝试将展开的项目的位置更改为相对，增加z-index属性，然后将其插入到您希望居中的区域内的div中？现在，你只是将它插入到body标签中，这将把它放在屏幕的中心。

或者，您可以尝试从以下位置更改宽度和高度属性的选择：

left: $(window).width()/2,
    top: $(window).height()/2,

要：

left: $('#centerArea').width()/2,
top: $('#centerArea').height()/2,

Answer 2

知道了。必须使用向左滚动和滚动来调整左侧和顶部位置。代码：

//Animate the size of the expanded item
    $expandedItem.animate({
        width: DDBR.constant.ITEM_EXPANDED_WIDTH,
        height: DDBR.constant.ITEM_EXPANDED_HEIGHT,
        left: $(window).scrollLeft() + $(window).width()/2,
        top: $(window).scrollTop() + $(window).height()/2,
        marginTop: -DDBR.constant.ITEM_EXPANDED_HEIGHT/2,
        marginLeft: -DDBR.constant.ITEM_EXPANDED_WIDTH/2,
        }, {
            duration: DDBR.constant.ITEM_ANIMATION_SPEED,
            easing: DDBR.constant.ITEM_ANIMATION_EASING,
            queue: false,
            complete: function() {
                animFinished = true;
                if (animFinished) {
                    imageFade();                            
                    }
                }
            });

使用Jquery将元素居中到可查看区域

2 个答案: