-1

jScrollPane に含まれる画像のリストがあり、画像をクリックすると派手なパンツ アニメーションが発生します。問題は、画面の上部から画像の位置を取得する必要があることです。jScrollPaneを使用しない場合はjQueryで簡単にこれを行うことができますが、場所を使用しても場所は変わりません。jScrollPane内の動きに関して画像の位置を見つけるにはどうすればよいですか?

これは、画像を画面に表示する方法の例です。jscrollpane JSFIDDLEを使用していないだけ です

これがこの問題を解決する方法だと思いますが、よくわかりません。 jScrollPane リスト項目へのリンク

画像を作成する方法。

  grid = $('#grid'),
  str = '';

  grid.empty();
  $.each(main_images,function(i,v){
   str += '<li gallery="'+i+'"><div class="title">'+(content.navgrid[2][i].title )+'</div><a ng-href="#" class="zoom"><img src="'+main_images[i]+'"/><span></span></a></li>';
});
  grid.append($(str));

  grid.jScrollPane({hideFocus:true});
4

2 に答える 2

-1

アニメーションで何をしたいのかわからない場合は、それをよりよく説明するか、問題を示す JSFiddle で更新する必要があります。

クリックした要素の位置まで jpane 内をスクロールする方法を確認できるシンプルな JSfiddle を作成しました。ここのドキュメントで必要なものを見つけることができます: http://jscrollpane.kelvinluck.com/scroll_to_animate.html

フィドル: http://jsfiddle.net/Djby5/5/

//wrap in local scope
$(function()
{
   var pane = $('.scroll-pane');
    pane.jScrollPane(
        {
            showArrows: true,
            animateScroll: true
        }
    );
    var api = pane.data('jsp');

    $('.grid li').click(function () {
        $(this).removeClass('.grid')
        var offset = $(this).offset();

        //scroll to the position
        api.scrollToY(offset.top);
    });
});

このように簡単に始めて、その上に必要なアニメーションを追加することをお勧めします。jpane の animate() 関数をオーバーライドして高度なアニメーションに置き換えるか、jquery の animate()api.reinitialise();を使用して、アニメーションの DOM 要素を変更または非表示にし、jpane スクロール可能領域を更新する場合は呼び出します。

編集 jpaneのソースコードから貼り付けます：

// This method is called when jScrollPane is trying to animate to a new position. You can override
// it if you want to provide advanced animation functionality. It is passed the following arguments:
//  * ele          - the element whose position is being animated
//  * prop         - the property that is being animated
//  * value        - the value it's being animated to
//  * stepCallback - a function that you must execute each time you update the value of the property
// You can use the default implementation (below) as a starting point for your own implementation.
animate: function(ele, prop, value, stepCallback)
{
    var params = {};
    params[prop] = value;
    ele.animate(
        params,
        {
            'duration'  : settings.animateDuration,
            'easing'    : settings.animateEase,
            'queue'     : false,
            'step'      : stepCallback
        }
    );
}
于 2013-09-22T21:21:55.930 に答える
-1

クリックした要素の上部が必要な場合は、これで可能だと思います。

 var position = $(this).offset().top;

更新されたフィドル

これがあなたが望んでいたものかどうかわかりません??

于 2013-09-21T06:45:18.850 に答える