blocks|key|284990|text|像这样的东西？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|284991|http://jsfiddle.net/jtbowden/ykbgT/embedded/result/|offset|length|284992|http://jsfiddle.net/jtbowden/ykbgT/|284993|这是基本的功能。它不能扩展到更多的div，等等，但这应该可以让你开始。|284994|关键是将元素包装在容器中，并隐藏溢出。|284995|更新|style|BOLD|284996|下面是一个稍微更好的版本，它可以处理任意数量的div(大于1)：|284997|http://jsfiddle.net/jtbowden/ykbgT/1/|284998|进一步简化了|284999|http://jsfiddle.net/jtbowden/ykbgT/2/|285000|代码段|285001|​|285002|$('.box').click(function()+{

++++$(this).animate({
++++++++left:+'-50%25'
++++},+500,+function()+{
++++++++$(this).css('left',+'150%25');
++++++++$(this).appendTo('#container');
++++});

++++$(this).next().animate({
++++++++left:+'50%25'
++++},+500);
});|code-block|syntax|javascript|285003|body+{
++++padding:+0px;++++
}

#container+{
++++position:+absolute;
++++margin:+0px;
++++padding:+0px;
++++width:+100%25;
++++height:+100%25;
++++overflow:+hidden;++
}

.box+{
++++position:+absolute;
++++width:+50%25;
++++height:+300px;
++++line-height:+300px;
++++font-size:+50px;
++++text-align:+center;
++++border:+2px+solid+black;
++++left:+150%25;
++++top:+100px;
++++margin-left:+-25%25;
}

#box1+{
++++background-color:+green;
++++left:+50%25;
}

#box2+{
++++background-color:+yellow;
}

#box3+{
++++background-color:+red;
}

#box4+{
++++background-color:+orange;
}

#box5+{
++++background-color:+blue;
}|285004|<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>|285005|285006|entityMap|0|LINK|mutability|MUTABLE|url|1|2|3^0|0|0|1F|0|0|0|Z|1|0|0|0|0|2|0|0|0|11|2|0|0|6|0|0|11|3|0|0|3|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1M|8|@]|9|@$D|1N|E|1O|1|1P]]|A|$]]|$1|F|3|G|5|6|7|1Q|8|@]|9|@$D|1R|E|1S|1|1T]]|A|$]]|$1|H|3|I|5|6|7|1U|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1V|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1W|8|@$D|1X|E|1Y|N|O]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|20|8|@]|9|@$D|21|E|22|1|23]]|A|$]]|$1|T|3|U|5|6|7|24|8|@$D|25|E|26|N|O]]|9|@]|A|$]]|$1|V|3|W|5|6|7|27|8|@]|9|@$D|28|E|29|1|2A]]|A|$]]|$1|X|3|Y|5|6|7|2B|8|@$D|2C|E|2D|N|O]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|2E|8|@]|9|@]|A|$]]|$1|11|3|12|5|13|7|2F|8|@]|9|@]|A|$14|15]]|$1|16|3|17|5|13|7|2G|8|@]|9|@]|A|$14|15]]|$1|18|3|19|5|13|7|2H|8|@]|9|@]|A|$14|15]]|$1|1A|3|10|5|6|7|2I|8|@]|9|@]|A|$]]|$1|1B|3|-4|5|6|7|2J|8|@]|9|@]|A|$]]]|1C|$1D|$5|1E|1F|1G|A|$1H|C]]|1I|$5|1E|1F|1G|A|$1H|G]]|1J|$5|1E|1F|1G|A|$1H|S]]|1K|$5|1E|1F|1G|A|$1H|W]]]]

<p>Something like this?</p>

<p><a href="http://jsfiddle.net/jtbowden/ykbgT/embedded/result/" rel="noreferrer">http://jsfiddle.net/jtbowden/ykbgT/embedded/result/</a></p>

<p><a href="http://jsfiddle.net/jtbowden/ykbgT/" rel="noreferrer">http://jsfiddle.net/jtbowden/ykbgT/</a></p>

<p>This is the basic functionality.  It doesn't scale to more divs, etc, but that should get you started.</p>

<p>The key is to wrap your elements in a container and make the overflow hidden.</p>

<p><strong>Update</strong>:</p>

<p>Here's a slightly better version that handles any number of divs (greater than 1):</p>

<p><a href="http://jsfiddle.net/jtbowden/ykbgT/1/" rel="noreferrer">http://jsfiddle.net/jtbowden/ykbgT/1/</a></p>

<p><strong>Simplified further</strong>:</p>

<p><a href="http://jsfiddle.net/jtbowden/ykbgT/2/" rel="noreferrer">http://jsfiddle.net/jtbowden/ykbgT/2/</a></p>

<p><strong>Code snippet</strong>:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.box').click(function() {

    $(this).animate({
        left: '-50%'
    }, 500, function() {
        $(this).css('left', '150%');
        $(this).appendTo('#container');
    });

    $(this).next().animate({
        left: '50%'
    }, 500);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="container"&gt;
    
    &lt;div id="box1" class="box"&gt;Div #1&lt;/div&gt;
    &lt;div id="box2" class="box"&gt;Div #2&lt;/div&gt;
    &lt;div id="box3" class="box"&gt;Div #3&lt;/div&gt;
    &lt;div id="box4" class="box"&gt;Div #4&lt;/div&gt;
    &lt;div id="box5" class="box"&gt;Div #5&lt;/div&gt;
    
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|283777|text|也许我误解了。我以为你想要三个div在一排，并且只在末端滑动和诸如此类的东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|283778|http://jsfiddle.net/acsfy/|offset|length|283779|(我知道您正在使用jQuery完成此任务，但它激怒了我，因为我试图迫使它工作。您必须根据您的目的对其进行调整。)|283780|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|Q|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

<p>Maybe I misinterpreted. I though you wanted three divs in a row, and only the ones on the end sliding and whatnot.</p>

<p><a href="http://jsfiddle.net/acsfy/" rel="nofollow">http://jsfiddle.net/acsfy/</a></p>

<p>(I know you're using jQuery for this, but it pissed me off as I was trying to force it to work. You'd have to adapt this for your purposes.)</p>


blocks|key|2996885|text|扩展Jeff+B的答案，我已经包括了Hammer.js，并做了一个循环列表。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2996886|$(function()+{
$("#esq").click(function()+{
++++console.log("Esquerda+!");
++++var+obj+=+$(".ativo");
++++$(obj).animate({
++++++++left:+'-50%25'
++++},+500,+function()+{
++++++++$(this).css('left',+'%2B150%25');
++++++++$(this).appendTo('#container');
++++});
++++$(obj).next().animate({
++++++++left:+'%2B50%25'
++++},+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:+'%2B150%25'
++++},+500,+function()+{
++++++++$(prox).prependTo('#container');
++++});
++++$(prox).css('left',+'-50%25');
++++$(prox).animate({
++++++++left:+'%2B50%25'
++++},+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");
});|code-block|syntax|javascript|2996887|})；|2996888|示例位于：http://jsfiddle.net/tvLt1r9h/2/|2996889|entityMap|0|LINK|mutability|MUTABLE|url|http://hammerjs.github.io/|1|http://jsfiddle.net/tvLt1r9h/2/^0|2|6|I|9|0|0|0|0|5|V|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|O|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

<p>Extending <strong>Jeff B</strong> answer, i've included <a href="http://hammerjs.github.io/" rel="nofollow">Hammer.js</a> and made a circular list.</p>

<pre><code>$(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");
});
</code></pre>

<p>});</p>

<p>Example in: <a href="http://jsfiddle.net/tvLt1r9h/2/" rel="nofollow">http://jsfiddle.net/tvLt1r9h/2/</a></p>


<p>This is a bit of a challenge. Here's what I'm looking for:</p>

<ol>
<li>3 divs on screen</li>
<li>Div 1 resides in the middle of the page (centered)</li>
<li>Div 2 resides just off the screen on the far left</li>
<li>Div 3 resides just off the screen on the far right</li>
<li><code>OnClick</code>, Div 1 slides to the position Div 2 was (to the left), Div 2 slides off the screen entirely, Div 3 slides to where Div 3 was (middle, centered). A new div arrives on the right.</li>
</ol>

<p>I've tried using jQuery animation and AddClass. jQuery doesn't like sliding a div offscreen. </p>

<p>Any thoughts?</p>

<p>For an example of what I'm describing, visit <a href="http://www.groupon.com/" rel="noreferrer">Groupon.com</a>. I thought it was a cool idea, and have given myself the challenge of recreating it. So far, no dice.</p>

<p>-D</p>


Slide a div offscreen using jQuery

容器

jQuery

这是一个小小的挑战。这就是我要找的：右侧出现一个新的div。我尝试过使用jQuery动画和AddClass。jQuery不喜欢将div滑出屏幕。有什么想法吗？有关我所描述的示例，请访问。我认为这是一个很酷的想法，并给了我自己重新创造它的挑战。到目前为止，没有骰子。-D

问使用jQuery将div滑出屏幕
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery将div滑出屏幕EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery将div滑出屏幕
EN