dousi3362
2013-08-08 14:35
浏览 46
已采纳

在移动主屏幕上滑动网页上的div

I'm building a mobile microsite that is to function like an app (with touch interaction).

I have a dropdown menu that has nearly full-screen divs which I want the user to be able to swipe between, like so:


enter image description hereenter image description hereenter image description here


I've included the jQuery Mobile library to get swipe events, which are working, but the divs are not sliding smoothly, and occasionally disappearing altogether, forcing me to refresh the page.

In the above picture example, on a swipe, div #1 would slide (hide) to the left fully, and then div #2 would slide (show) in the same direction, only after div #1 fully hid. I need the two events to happen simultaneously, so there isn't a gap between divs #1 and #2.

As for the disappearing problem, I have no idea what's causing that, sorry. Here is some relevant code...

javascript:

$('#menu').on('swipeleft', 'div', function(event) {
    $('#' + nextPage($(this).attr('id'),'l')).show('slide', { direction: 'right' }, 500);
    $(this).hide('slide', { direction: 'left' }, 500);
});
$('#menu').on('swiperight', 'div', function(event) {
    $(this).hide('slide', { direction: 'right' }, 500);
    $('#' + nextPage($(this).attr('id'),'r')).show('slide', { direction: 'left' }, 500);
});

If there's a better way to do this, I'm all ears.

Thanks!

图片转代码服务由CSDN问答提供 功能建议

我正在构建一个移动微型网站,其功能类似于应用程序(具有触摸交互功能)。

我有一个下拉菜单,其中包含几乎全屏的div,我希望用户可以在其间滑动,如下所示:



我已经包含了jQuery Mobile库以获取滑动事件,这些事件正在运行,但div不能平滑滑动,偶尔也会消失,迫使我刷新页面。

在上面的图片示例中,在滑动时,div#1将完全滑动(隐藏)到左侧,然后 div#2将滑动(显示)在 同样的方向,只有在div#1完全隐藏之后。 我需要同时发生这两个事件,所以div#1和#2之间没有差距。

至于消失的问题,我不知道是什么导致了这个,对不起 。 以下是一些相关代码......

javascript:

  $('#menu')。  on('swipeleft','div',function(event){
 $('#'+ nextPage($(this).attr('id'),'l'))。show('slide',{ 方向:'右'},500); 
 $(this).hide('slide',{direction:'left'},500); 
}); 
 $('#menu')。on  ('swiperight','div',函数(事件){
 $(this).hide('slide',{direction:'right'},500); 
 $('#'+ nextPage($( 这个).attr('id'),'r'))。show('slide',{direction:'left'},500); 
}); 
   
  
 

如果有更好的方法,我会全力以赴。

谢谢!

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • douchun2158 2013-08-08 19:30
    已采纳

    Try:

    SwipeJS

    or

    Check out this answer which describes how to use jquery mobile transitions outside of the normal usage.

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题