手机上的向下滑动效果

Slide down effect on mobile

本文关键字：手机      更新时间：2023-09-26

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

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

据我所知，这是一个WebView，但他们是如何产生这种效果的？

我想开发类似的东西，有线索吗？

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

我找到了一些库来寻求帮助：

  • SwipeBox=>http://brutaldesign.github.io/swipebox/

  • TouchPunch（可调整大小）=>http://touchpunch.furf.com/content.php?/resizable/default-功能

这里有一个演示

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

这几乎是可以的，但当我调整大小时，在某个时候，滑动框会触发，就像在视频中一样。

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

我认为我应该指定一个maxHeight，并在它达到时启动SwipeBox？

有什么帮助或线索吗？提前感谢

您可以监听resize事件，并在高度达到预定义值时触发任何函数，如下面的代码和演示中所示

演示

$('#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'
    }]);
  }
});
相关文章：