如何使用jquery Show()方法显示图像的百分比

时间:2013-01-17 21:27:00

标签: javascript jquery html jquery-mobile jquery-effects

当您向左或向右滑动移动浏览器时,我正在尝试创建与叠加箭头(即桌面版Chrome)相同的效果。

我使用javascript和jQuery,现在我可以在刷卡时显示箭头。我设法有滑动的距离,但我找不到连接这两个的方法所以我只显示与距离有关的箭头的一部分!

$('#arrow').show('slide',{direction: 'right'},1000);
$('#arrow').fadeIn();
$('#arrow').fadeOut();

我正在尝试使用animate(),但我仍然陷入困境:S

感谢您的帮助

1 个答案:

答案 0 :(得分:0)

您需要三个值:startendcurrent

在您的情况下,您需要确定start end值是多少。

我想说使用可滑动区域(屏幕)的宽度,这会给你0x(其中x是你的可滑动区域的宽度)。您已经有current,这是start与实际滑动结束的距离(滑动的宽度,也许是?)。

获得这些值后,您可以导出百分比(介于0和1之间)并使用@ mikakun的建议将其应用于箭头。箭头图形要么必须绝对定位在容器中,要么设置为容器的背景图像。这将使您只看到容器扩展以显示更多的箭头的百分比。一个很好的效果是在你所揭示的那个背后有一个完整箭头的半透明/灰色副本。