我希望在页面之间进行实时响应。这将通过用户滑动手势以1：1动作“拖动”页面，同时临时显示两个页面的一部分。如果滑动覆盖了所需的最小移动量，则页面将切换（“快照”）到下一个页面；否则，页面将返回到先前显示的页面。这在电子书阅读器中很常见。这是一个example of this concept switching images（示例似乎仅是WebKit）。
当前，您必须完成一次滑动，然后页面才会更改。
这是我当前的代码（非常感谢Phill Pafford）：
JSFiddle
HTML：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Application</title>
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0/css/themes/default/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0/js/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>First page!</p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
<section id="page2" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>Second page!</p>
</div>
<footer data-role="footer"r><h1>O'Reilly</h1></footer>
</section>
<section id="page3" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div data-role="content" class="content">
<p>Third page!</p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
</body>
</html>
jQuery的：
(function($) {
var methods = {
init : function(options) {
var settings = {
callback: function() {}
};
if ( options ) {
$.extend( settings, options );
}
$(":jqmData(role='page')").each(function() {
$(this).bind("swiperight", function() {
var nextPage = parseInt($(this).attr("id").split("page")[1]) - 1;
if (nextPage === 0)
nextPage = 3;
$.mobile.changePage("#page"+nextPage, {
transition: "slide",
reverse: false
});
});
$(this).bind("swipeleft", function() {
var nextPage = parseInt($(this).attr("id").split("page")[1]) +1;
if (nextPage === 4)
nextPage = 1;
$.mobile.changePage("#page"+nextPage, {
transition: "slide",
reverse: true
});
});
})
}
}
$.fn.initApp = function(method) {
if ( methods[method] ) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}
else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
}
else {
$.error( 'Method ' + method + ' does not exist' );
}
}
})(jQuery);
$(document).ready(function(){
$().initApp();
});
如何合并这种实时切换？
最佳答案
通过使用iDangero.us编写的Swiper jQuery插件，我能够做到这一点。尽管我不是在寻找其他代码解决方案，而是要使用现有的jQuery库，但这似乎是目前最好的选择。我必须将页面从jQuery Mobile使用的格式切换到Swiper格式。
他们的示例中的HTML结构：
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide red-slide">
<div class="title">Slide 1</div>
</div>
<div class="swiper-slide blue-slide">
<div class="title">Slide 2</div>
</div>
<div class="swiper-slide orange-slide">
<div class="title">Slide 3</div>
</div>
<div class="swiper-slide green-slide">
<div class="title">Slide 4</div>
</div>
<div class="swiper-slide pink-slide">
<div class="title">Slide 5</div>
</div>
<div class="swiper-slide red-slide">
<div class="title">Slide 6</div>
</div>
<div class="swiper-slide blue-slide">
<div class="title">Slide 7</div>
</div>
<div class="swiper-slide orange-slide">
<div class="title">Slide 8</div>
</div>
</div>
<div class="pagination"></div>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/idangerous.swiper-2.1.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true
})
</script>
可以从Swiper project on GitHub下载代码和示例。
如果有人回答仅使用jQuery或jQuery Mobile的方法，那么我会将最佳答案切换为您的答案。