0

我有一个巨大的可滚动区域。在一个部分中，我有一个缩略图网格。单击时，拇指被克隆并动画到屏幕中心，但它动画到整个区域的中心，而不是您正在查看的区域，即滚动到的区域。我怎样才能让它动画到可视区域的中心？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 项目的位置更改为“固定”。但是，这会产生一个问题，因为它需要从我使用拇指的“偏移”获得的单击缩略图的位置进行动画处理。更改 $expandedItem 的位置会导致它在第一次加载时从拇指的位置开始动画，而不是在页面滚动后的当前位置。

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

提前致谢。

4

2 回答 2

0

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

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

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

到：

left: $('#centerArea').width()/2,
top: $('#centerArea').height()/2,
于 2012-05-15T17:29:23.440 回答
0

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

//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();                            
                    }
                }
            });
于 2012-05-16T08:22:57.927 回答