使用jQuery滑动div offscreen

这是一个挑战。 这是我正在寻找的东西:

  1. 3屏幕上的div
  2. Div 1驻留在页面的中间(居中)
  3. Div 2位于最左边的屏幕之外
  4. Div 3位于最右边的屏幕之外
  5. OnClick ,Div 1滑动到Div 2位置(左边),Div 2完全滑出屏幕,Div 3滑动到Div 3所在的位置(中间,居中)。 新的div到达右边。

我试过使用jQueryanimation和AddClass。 jQuery不喜欢滑动div离屏。

有什么想法吗?

有关我所描述的示例,请访问Groupon.com 。 我认为这是一个很酷的想法,并给自己一个重新创造的挑战。 到目前为止,没有骰子。

-D

像这样的东西?

http://jsfiddle.net/jtbowden/ykbgT/embedded/result/

http://jsfiddle.net/jtbowden/ykbgT/

这是基本的function。 它不会扩展到更多的div等,但是这应该让你开始。

关键是将你的元素包装在一个容器中,并使隐藏溢出。

更新

这是一个稍微好一点的版本,可以处理任何数量的div(大于1):

http://jsfiddle.net/jtbowden/ykbgT/1/

进一步简化

http://jsfiddle.net/jtbowden/ykbgT/2/

代码片段

 $('.box').click(function() { $(this).animate({ left: '-50%' }, 500, function() { $(this).css('left', '150%'); $(this).appendTo('#container'); }); $(this).next().animate({ left: '50%' }, 500); }); 
 body { padding: 0px; } #container { position: absolute; margin: 0px; padding: 0px; width: 100%; height: 100%; overflow: hidden; } .box { position: absolute; width: 50%; height: 300px; line-height: 300px; font-size: 50px; text-align: center; border: 2px solid black; left: 150%; top: 100px; margin-left: -25%; } #box1 { background-color: green; left: 50%; } #box2 { background-color: yellow; } #box3 { background-color: red; } #box4 { background-color: orange; } #box5 { background-color: blue; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="box1" class="box">Div #1</div> <div id="box2" class="box">Div #2</div> <div id="box3" class="box">Div #3</div> <div id="box4" class="box">Div #4</div> <div id="box5" class="box">Div #5</div> </div> 

也许我误解了。 我虽然你想连续三个div,只有那些在结束滑动什么的。

http://jsfiddle.net/acsfy/

(我知道你正在使用jQuery来做这件事,但是当我试图强制它工作的时候,这让我很生气,你不得不为了你的目的而调整它)。

扩展杰夫B的答案,我已经包括了Hammer.js并做了一个通告列表。

 $(function() { $("#esq").click(function() { console.log("Esquerda !"); var obj = $(".ativo"); $(obj).animate({ left: '-50%' }, 500, function() { $(this).css('left', '+150%'); $(this).appendTo('#container'); }); $(obj).next().animate({ left: '+50%' }, 500, function() { $(this).addClass('ativo'); $(obj).removeClass('ativo'); }); }); $("#dir").click(function() { console.log("Direita !"); var obj = $(".ativo"); var prox = $(obj).siblings(":last"); $(obj).animate({ left: '+150%' }, 500, function() { $(prox).prependTo('#container'); }); $(prox).css('left', '-50%'); $(prox).animate({ left: '+50%' }, 500, function() { $(this).addClass('ativo'); $(obj).removeClass('ativo'); }); }); var hammertime = new Hammer(document.getElementById("container")); hammertime.get('swipe').set({direction: Hammer.DIRECTION_HORIZONTAL}); hammertime.on('swipeleft', function() { $("#esq").trigger("click"); }); hammertime.on('swiperight', function() { $("#dir").trigger("click"); }); 

});

例如: http : //jsfiddle.net/tvLt1r9h/2/

而且……一年也不迟。 如果你想在第一个div开始,你的CSS需要看起来像这样。


     #box1 {background-color:#333;  }
     #box2 {background-color:#333; 剩下:-50%;  }
     #box3 {background-color:#333; 左:150%;  }
     #box4 {background-color:#333; 左:150%;  }
     #box5 {background-color:#333; 左:150%;  }