这是一个小小的挑战。这就是我要找的:
右侧出现一个新的div。
我尝试过使用jQuery动画和AddClass。jQuery不喜欢将div滑出屏幕。
有什么想法吗?
有关我所描述的示例,请访问Groupon.com。我认为这是一个很酷的想法,并给了我自己重新创造它的挑战。到目前为止,没有骰子。
-D
发布于 2011-01-20 07:47:07
像这样的东西?
http://jsfiddle.net/jtbowden/ykbgT/embedded/result/
http://jsfiddle.net/jtbowden/ykbgT/
这是基本的功能。它不能扩展到更多的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>
发布于 2011-01-20 08:06:24
也许我误解了。我以为你想要三个div在一排,并且只在末端滑动和诸如此类的东西。
(我知道您正在使用jQuery完成此任务,但它激怒了我,因为我试图迫使它工作。您必须根据您的目的对其进行调整。)
发布于 2015-12-11 22:08:56
扩展Jeff 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");
});
});
https://stackoverflow.com/questions/4741880
复制相似问题