1
このリンクに表示されている通り:https://www.tumblr.com/explore/text ハッシュタグをクリックして左右にドラッグすると、自動的に元の位置に戻ります。tumblrのようなjqueryのスクロール効果を作るには?
< >の要素を左右に移動することができますが、ドラッグすると元の位置に戻すことはできません。私の仕事はここにある: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のに新たなんだ、そうあなたは私を助けることを願って。どうもありがとうございました!
ありがとうございました!しかし、それは本当に理解するのが難しいです:D –
sulu ruin全体は数学に基づいており、忘れたのはdivの終わりがコンテナを通過するときをチェックすることだけでした。次に、コピーオプションを削除してスムーズなドラッグを行い、divをコンテナを離した後に戻したときのリバウンド効果のアニメーションを追加するように修正しました。お役に立てれば。 – Zorken17