Question

大家好，我解释一下我的问题，我创建了一个500px宽和100px高的主容器（隐藏溢出）......

在各种盒子的容器2内，总是500px 100px，生病了＆＃39;插入一些100px X 100px的盒子，再加上两个控制按钮，将容器向右或向左移动100px。

这些方框是可见的5，例如，如果有8个我想点击按钮＆＃39;右边＆＃39;容器2将移动100px，但当它们到达最后一个块（在此示例中为8）时，按钮向右移动必须禁用。相反，如果我们启动左边的按钮，Go必须被禁用，直到右边至少完成一次移动。

另外，当我移动框中包含的元素时，你可以看到它在移动过程中消失，这个东西不好，各种盒子必须移动但始终保持可见。

在JSfiddle上我创建了一个demo，我无法创建合适的条件，你有解决方案吗？感谢

＆＃13;

$( "#right" ).click(function() {
  $( "#block" ).animate({ "left": "+=105px" }, "slow" );
    
});
 
$( "#left" ).click(function(){
  $( "#block" ).animate({ "left": "-=105px" }, "slow" );
});

＆＃13;

.cont{
    width:530px;
    height:100px;
    position:absolute;
    background:#000;
    overflow:hidden;
}
.box-cont{
    width:auto;
    height:100px;
    position:absolute;
    background:yellow;
   
}
.box{
    width:100px;
    height:100px;
    position:relative;
    float:left;
    margin-left:5px;
    background:#F00;
    text-align:center;
    font-size:32px;
}
.btn{

    position:absolute;
    left:0px;
    top:120px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="cont">
  
    

    <div class="box-cont" id="block">
        
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        
    </div>
    
    
</div>

<div class="btn">
    <button id="left">&laquo;</button>
    <button id="right">&raquo;</button>
</div>

＆＃13;

Answer 1

您可以使用以下内容：

<script>

    var totalBlocks         = $('#block div.box').length;
    var blockViews          = Math.round($('#block').width() / $('#block div.box').width());
    var currentPosition     = 0;

    $( "#right" ).click(function() {

        if(currentPosition > 0)
        {
            $( "#block" ).animate({ "left": "+=105px" }, "slow" );
            currentPosition--;
        }
    });

    $( "#left" ).click(function(){
        if(blockViews + (currentPosition+1) <= totalBlocks)
        {   
            $( "#block" ).animate({ "left": "-=105px" }, "slow" );
            currentPosition++;
      }
    });
</script>

Answer 2

看看这个，这有帮助吗？您可以拖动和移动元素本身，并在其上放置左右阈值。我试图模仿谷歌gmail轻扫 http://jsfiddle.net/williamhowley/o9uvo50y/

 $('ul#main > li')
.on('movestart', function (e) {
    console.log("move start");

    // var $li = $(e.target).closest('.swipable'); // this would be normal live integration
    var $li = $(e.target);
    if ($li.attr("data-hasplaceholder") !== "true") { // if it does not have a placeholder, add one.
        createBackgroundSpacer($li);
        $li.attr("data-hasplaceholder", true); // signify that a placeholder has been created for this element already. 
    }

    // If the movestart heads off in a upwards or downwards
    // direction, prevent it so that the browser scrolls normally.
    if ((e.distX > e.distY && e.distX < -e.distY) ||
        (e.distX < e.distY && e.distX > -e.distY)) {
        e.preventDefault();
        return;
    }

    // To allow the slide to keep step with the finger,
    // temporarily disable transitions.
    wrap.addClass('notransition'); // add this to the container wrapper. 
})
.on('move', function (e) {
    // event definitions
    // startX : 184, where from left the mouse curser started.
    // deltaX: ?
    // distX: how far the mouse has moved, if negative moving left. Still need to account for double movement, currently can only handle one movement. 

    console.log("move");
    console.log(e);

    var maxLeft = $('.rightContent').width();
    var marginLeftNum = Number($(this).css('margin-left').replace(/[^-\d\.]/g, ''));

    if (marginLeftNum <= -maxLeft && e.deltaX < 0) { // Case when user is at outermost left threshold, and trying to move farther left.  
        $(this).css({ 'margin-left': -maxLeft });
    }
    else if (marginLeftNum == -maxLeft && e.deltaX > 0) { // When user is at threshold, and trying to move back right. 
        $(this).css({ 'margin-left': marginLeftNum + e.deltaX });
    }
    else if (e.target.offsetLeft>=0 && e.deltaX>0) { // If the offset is 0 or more, and the user is scrolling right (which is a positive delta, than limit the element. )
        $(this).css({ 'margin-left': 0 });
    }
     // Must have a Negative offset, and e.deltaX is Negative so it is moving left. 
    else if (e.deltaX < 0) { // Case when element is at 0, and mouse movement is going left. 
        $(this).css({ 'margin-left': marginLeftNum + e.deltaX }); 
    }
    else {  // Moving Right when not on 0
        $(this).css({ 'margin-left': marginLeftNum + e.deltaX });
    }



})
.on('swipeleft', function (e) {
    console.log("swipeleft");
})
.on('activate', function (e) {
    // not seeing this activate go off, i think this is custom function we can add on if swipe left hits a threshold or something. 
    console.log("activate");
})
.on('moveend', function (e) {
    console.log("move end");
    wrap.removeClass('notransition');
 });

Jquery - 用条件向左或向右移动元素

2 个答案: