当您向左或向右滑动移动浏览器时,我正在尝试创建与叠加箭头(即桌面版Chrome)相同的效果。
我使用javascript和jQuery,现在我可以在刷卡时显示箭头。我设法有滑动的距离,但我找不到连接这两个的方法所以我只显示与距离有关的箭头的一部分!
$('#arrow').show('slide',{direction: 'right'},1000);
$('#arrow').fadeIn();
$('#arrow').fadeOut();
我正在尝试使用animate(),但我仍然陷入困境:S
感谢您的帮助
答案 0 :(得分:0)
您需要三个值:start
,end
,current
。
在您的情况下,您需要确定start
end
值是多少。
我想说使用可滑动区域(屏幕)的宽度,这会给你0
和x
(其中x
是你的可滑动区域的宽度)。您已经有current
,这是start
与实际滑动结束的距离(滑动的宽度,也许是?)。
获得这些值后,您可以导出百分比(介于0和1之间)并使用@ mikakun的建议将其应用于箭头。箭头图形要么必须绝对定位在容器中,要么设置为容器的背景图像。这将使您只看到容器扩展以显示更多的箭头的百分比。一个很好的效果是在你所揭示的那个背后有一个完整箭头的半透明/灰色副本。