-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 进行更新。

我为您创建了一个简单的 JSfiddle，您可以在其中看到如何在 jpane 内滚动到单击元素的位置。您可以在此处的文档中找到您需要的内容：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 回答