我有一个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});
答案 0 :(得分:-1)
答案 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
}
);
}