如何使像tumblr jQuery的滾動效果？

Question

正如你可以在這個鏈接中看到的：https://www.tumblr.com/explore/text 當我們點擊並拖動標籤太多左右時，它們會自動回到原來的位置。

現在我可以讓我的鏈接，這意味着<一個>元素，移動到左側和右側，但如果我拖動太多，他們不能被帶回到原來的位置。我的工作是在這裏：https://codepen.io/victorcruzte/pen/oxMYJw

HTML：

<div class="parent"> 
    <div class="children"> 
     <a href="#">abcdefg</a> 
     <a href="#">abcdefg</a> 
     <a href="#">abcdefg</a> 
     <a href="#">abcdefg</a> 
     <a href="#">abcdefg</a> 
     <a href="#">abcdefg</a> 
     <a href="#">abcdefg</a> 
     <a href="#">abcdefg</a> 
    </div> 

    </div> 

CSS：

.parent { 
    margin: 200px auto; 
    width: 200px; 
    height: 100px; 
    overflow: hidden; 
    border: 1px solid #000; 
} 
.children { 
    float: left; 
    white-space: nowrap; 
} 

JS：

var x1, x2 = 0, x3; 
var click = false; 
var temp = 0, temp2, temp3 = 0; 

function draga() { 
    $('.children a').click(function(e) { 
     e.preventDefault(); 
    }); 

    $('.children').mousedown(function(e) { 
    click = true; 
    x1 = e.pageX; 
    }); 

    $(document).mouseup(function() { 
    click = false; 
    }); 

    $('.children').mousemove(function(e) { 
    if (click === false) return; 
    e.stopPropagation(); 
    (temp3 != x1) ? (temp2 = 0) : (temp2 = x2); 
    temp3 = x1; 
    x2 = e.pageX; 
    (temp2 === 0) ? x3 = (x2 - x1) : x3 = (x2 - temp2); 
    temp += x3; 
    $(this).css('background-color', 'pink'); 
    $(this).css('transform', 'translate('+ temp + 'px, 0px'); 
    }); 
}; 


$(window).load(function() { 
    draga(); 
}); 

我是新來的jQuery，所以希望你能幫助我。非常感謝你！

Answer 1

我想我解決了你的問題，並希望它會有所幫助。 請參閱下面的代碼和代碼片段：

你缺少的是當孩子的元素脫離perent元素時的檢查。

var xStart = 0; 
 
var xStop = 0; 
 
var xDelta = 0; 
 

 
function draga() { 
 
    $('.children').find('a').attr('onmousedown', 'return false') 
 

 
    $('.children a').click(function(e) { 
 
    e.preventDefault(); 
 
    }); 
 

 
    $('.children').mousedown(function(e) { 
 
    xStart = e.pageX; 
 

 
    $(document).mousemove(function(e) { 
 
     xDelta = parseInt((e.pageX + xStop) - xStart); 
 
     $('.children').css('transform', 'translate(' + xDelta + 'px, 0)'); 
 
    }) 
 
    }); 
 

 
    $(document).mouseup(function(e) { 
 
    if (xDelta > 185) { 
 
\t \t \t 
 
     $({ Counter: xDelta }).animate({ Counter: 0 }, { 
 
    \t \t \t duration: 500, 
 
    \t \t \t step: function() { 
 
    \t \t \t $('.children').css('transform', 'translate('+ this.Counter +'px, 0)'); 
 
    \t \t \t } 
 
\t \t \t }); 
 
     xDelta = 0; 
 
    } else if (xDelta < -($('.children').width() - 15)) { 
 
     xDelta += Math.abs($('.children').width() - Math.abs(xDelta)) + 200; 
 
     
 
     $({ Counter: -$('.children').width() }).animate({ Counter: xDelta }, { 
 
    \t \t \t duration: 500, 
 
    \t \t \t step: function() { 
 
    \t \t \t $('.children').css('transform', 'translate('+ this.Counter +'px, 0)'); 
 
    \t \t \t } 
 
\t \t \t }); 
 
    } 
 

 
    xStop = xDelta; 
 
    $(document).off("mousemove"); 
 
    }) 
 
} 
 

 
$(window).load(function() { 
 
    draga(); 
 
});

.parent { 
 
    margin: 50px auto; 
 
    width: 200px; 
 
    height: 100px; 
 
    overflow: hidden; 
 
    border: 1px solid #000; 
 
} 
 

 
.children { 
 
    float: left; 
 
    white-space: nowrap; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<div class="parent"> 
 
    <div class="children"> 
 
    <a href="#">abcdefg</a> 
 
    <a href="#">abcdefg</a> 
 
    <a href="#">abcdefg</a> 
 
    <a href="#">abcdefg</a> 
 
    <a href="#">abcdefg</a> 
 
    <a href="#">abcdefg</a> 
 
    <a href="#">abcdefg</a> 
 
    <a href="#">abcdefg</a> 
 
    </div> 
 
</div>