Question

我有一个jScrollPane中包含的图像列表，当您点击图像时，会出现一些花哨的裤子动画。问题是我需要从屏幕顶部获取图像的位置。我不能在不使用jScrollPane时使用jQuery轻松完成此操作，但是当我使用location时不会改变。如何在jScrollPane中找到图像相对于运动的位置？

以下是我如何在屏幕上显示图像的示例。它只是没有使用jscrollpane JSFIDDLE

我认为这是解决这个问题的方法，但我不确定。 Link to jScrollPane list item

我是如何构建图像的。

  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});

Answer 1

我想如果你想要点击元素的顶部那么就可以了。

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

<强> Updated Fiddle

我不确定这是你想要的吗？

Answer 2

不知道你想用动画做什么，你需要更好地解释一下，或者用一个显示你问题的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's animate()并在动画中更改或隐藏DOM元素并且希望更新jpane可滚动区域时调用api.reinitialise();

修改从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 } ); }

使用jScrollPane查找图像的位置

2 个答案: