2
我正在与一个情况作斗争，并认为我会在这里发布问题，看看是否有人可以找出我出错的地方。JavaScript /分页部门
的背后是什么我做的是如下的想法：
我有一个页面（这实际上是和iPad应用程序），允许用户左右滚动向前和向后移动。每次用户向左滑动（向前移动），我们都想向他们展示一个新的768px页面（宽度）。因为每个div的宽度是768个像素，而我们可以有50多个div，所以它的想法是去掉主页。
所以在任何时候我在屏幕上都有4个div，每次只显示1个div。所以在启动时我们有如下所示的东西。
<content>
<div id='wrapper_1'>content</div>
<div id='wrapper_2'>content</div>
<div id='wrapper_3'>content</div>
<div id='wrapper_4'>content</div>
</content>
当用户刷卡，我想请删除wrapper_1，加wrapper_5基本上都有了重新的位置正确。
我遇到的问题是每次删除前导div我的内容div显然会改变宽度，我失去了我正在看的页面。所以我脑海中明显的“修复”是考虑到我刚删除的div，重新定位内容。
但是我正在与jquery offset方法作斗争。要么我错误地使用了这个，要么我忽略了一些东西。
$('#wrapper_'+this.pageArray[0]).remove();
this.pageArray.shift();
var n = pageIndex - 1;
var t = 768 * n;
$("#content").offset({ left: t})
我通过将数组存储在数组中来跟踪哪些div在页面上。每次我添加一个页面时，我基本上都会对div执行remove（）操作，然后对数组进行移位操作。现在问题是偏移量不能按我预期的方式工作。基本上不会出现左值给我一个绝对的x位置。
首先，这种方法看起来是否正确？其次是我的理解/执行偏移不正确？
编辑：
对于任何人以下的线程，看来我的最大的问题是我是如何处理的手势。看起来有一些事件冲突，使用打手势库似乎已经清除了我最后的很多混乱。
下面是我更新的代码，它似乎运作良好。随意批评方法。
<html>
<head>
<style>
.wrapper{
height: 200px;
width: 600px;
overflow: hidden;
}
.button_wrapper{
width: 600px;
}
#content{
background-color: #F00;
height: 200px;
width: 3000px;
}
.page{
width: 200px;
height: 200px;
float: left;
background-color: #FF0;
}
#wrapNext{
width: 100px;
height: 20px;
background-color: #FF0000;
float: right;
cursor: pointer;
}
#wrapPrev{
width: 100px;
height: 20px;
background-color: #FF0000;
float: left;
cursor: pointer;
}
.site_wrap > .slides_wrap {
margin-bottom: 1em;
margin-left: -8px;
margin-right: -8px;
}
.img_slides_wrap {
width: 784px;
border: 8px solid #333333;
background-color: #444444;
overflow: hidden;
}
.img_slide {
padding: 0;
}
.js .img_slide {
/* Overide template's height transitions. */
width: 100%;
height: auto;
}
.slide_buttons_index {
text-align: center;
}
.notransition,
.notransition .slide {
-webkit-transition-duration: 0 !important;
-moz-transition-duration: 0 !important;
-ms-transition-duration: 0 !important;
transition-duration: 0 !important;
-webkit-transition-delay: 0 !important;
-moz-transition-delay: 0 !important;
-ms-transition-delay: 0 !important;
transition-delay: 0 !important;
}
@media screen and (max-width: 640px) {
.img_slides_wrap {
width: 100%;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
}
}
</style>
</head>
<body>
<div class='wrapper'>
<div id='content' class='img_slides_wrap slides_wrap wrap'>
<div id='page0' class='page'>Page 0</div>
<div id='page1' class='page'>Page 1</div>
<div id='page2' class='page'>Page 2</div>
<div id='page3' class='page'>Page 3</div>
</div>
</div>
<div class='button_wrapper'>
<div id='wrapPrev'>
<div id="prev">Previous</div>
</div>
<div id='wrapNext'>
<div id="next">Next</div>
</div>
</div>
</body>
<script src="jquery.min.js"></script>
<script src="jquery.event.move.js"></script>
<script src="jquery.event.swipe.js"></script>
<script>
$(document).ready(function() {
var counter = 4;
var selectedPageIndex = 1;
var lastKnownX = 0;
var articleListLength = 10; // testing
$("#next").click(function() {
showNext();
});
$("#prev").click(function() {
showPrev();
});
function showNext(){
if (counter <= articleListLength + 1){
// first remove the leading div
var leadingDiv = $('#page'+(counter - 4));
leadingDiv.animate({ width: '0px' }, 250, function() {
$(this).remove();
});
var html = "<div id='page"+counter+"' class='page img_slide slide'>Page "+counter+"</div>";
$('#content').append(html);
counter ++;
selectedPageIndex ++;
}
}
function showPrev(){
if(counter >= 5){
var target = selectedPageIndex - 1;
var leadingDiv = $('#page'+(target));
var newLeadingDiv = $('#page'+(target - 1));
var html = "<div id='page"+(target-1)+"' class='page img_slide slide' style='width:0px'>Page "+(target-1)+"</div>";
$(html).insertBefore('#page'+(selectedPageIndex-1));
$('#page'+(target - 1)).animate({ width: '200px' }, 250, function() {
});
var removalTarget = $('#page'+(selectedPageIndex + 2));
removalTarget.remove();
counter --;
selectedPageIndex --;
}
}
var wrap = jQuery('.slides_wrap'),
width = wrap.width();
$('#content')
.on('swipeleft', function(e) {
showNext();
})
.on('swiperight', function(e) {
showPrev();
})
});
</script>
</html>
我不太确定这是如何在iPad应用程序中工作的，但总是显示1格（其余部分显示为“无”）并不容易，并且在触摸/滑动时切换所有可见性/ scroll/whatever-event？ – Nanne
是的，但是挑战在于给下一个/上一个页面的iPad滑动动画过渡。它基本上应该像你的照片一样工作。 –
为Nanne解决方案指定了一个转换，一个简单的.transition类可以做到这一点。继承人如何CSS可以用来滑动的东西，并褪色它在一个很好的干净stransittion的样本，即时通讯不是100％possitive如何将其应用于您的div情况，但我确信这可能有助于http://jsfiddle.net/u2FKM/3 /我找到@ jerome.s发布的链接http://stackoverflow.com/questions/13968486/move-div-with-css-transition –