在移动设备上滑下效果

Question

我正在开发一个应用程序，我的客户想要这样的东西

http://www.youtube.com/watch?v=F0F-jjIcEPY

据我所知，这是一个WebView，但他们是如何做到这一点的呢？

我想开发类似的东西，任何线索？

我想也许可以用jQuery Mobile完成，但你怎么能滑下来并在某些时候打开图片库？

我找到了一些图书馆寻求帮助：

• SwipeBox =＆gt; http://brutaldesign.github.io/swipebox/

• TouchPunch（Resizable）=＆gt; http://touchpunch.furf.com/content.php?/resizable/default-functionality

这里有一个演示

http://jsfiddle.net/iruindegi/B3TH7/

这几乎没问题，但是当我调整大小时，我需要在某些时候触发swipebox，就像在视频中一样。

$(function() {
    $( "#resizable" ).resizable();
});

我认为我需要指定一个maxHeight并在它到达时触发SwipeBox？

任何帮助或线索？ 提前谢谢

Answer 1

一旦高度达到预定值，您就可以收听resize事件并触发任何功能，如下面的代码和演示

  

<强> Demo

$('#resizable').on('resize', function (e) {
  var box_h = $(this).height();
  if (box_h > 200) { // ** define height here ** //
    e.preventDefault();
    $.swipebox([{
        href: 'http://swipebox.brutaldesign.com/assets/full/reine.jpg',
        title: 'My Caption'
    }, {
        href: 'http://swipebox.brutaldesign.com/assets/full/nuke.jpg',
        title: 'My Second Caption'
    }]);
  }
});