使用jScrollPane查找图像的位置

时间:2013-09-13 17:05:02

标签: jquery css jscrollpane

我有一个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});

2 个答案:

答案 0 :(得分:-1)

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

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

<强> Updated Fiddle

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

答案 1 :(得分:-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'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
        }
    );
}