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

とった。scrollLeft と scroll を使用して左と上の位置を調整する必要がありました。コード：

//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 に答える
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 に答える