1

jquery animateを使用してスクロールタイプオプションをエミュレートする方法はありますか? 現在は、指定した値と同じだけスクロールします (以下のように)。この div でカスタム スクロール バーを作成することはできません。これは、主にモバイル デバイスで簡単にスクロールできるようにすることを目的としているためです。したがって、以下の例では、上から -100px までスクロールしますが、その後停止して繰り返します。これを継続する簡単な移行方法はありますか。

jQuery(".down-arrow").mousedown(function(){
        var height = jQuery("#technology_list").height();
        //if($('#technology_list').offset().top 
        scrolling = true;
        startScrolling(jQuery("#technology_list"), "-=100px");
        //jQuery("#technology_list").animate({top: '-=25'});
    }).mouseup(function(){
        scrolling = false;
    });

    function startScrolling(obj, param)
{
    obj.animate({"top": param}, "fast", function(){
        if (scrolling)
        {
                startScrolling(obj, param);
        }
    });
4

3 に答える 3

4

実際の動作を示すjsFiddle

最も簡単な答えは、アニメーションを設定してイージングをlinearに設定することです。

.animate( { /* whats animating */ } , duration: 'XXX', easing: 'linear'
   ,function () { /* callback */ } 
);

奇妙なことに、イージングが animate() から除外されている場合、そのデフォルトは実際には線形ではありません (基本的にはオフになります)。デフォルトは標準のイージングであり、「滑らかさ」を排除し、ここで必要なアニメーション全体を通して 1 つの速度になります。

以下に例を示します。

var end = 20;

for (i = 0; i < end; i++) {
  $('#test').animate({'top': '+=50px'}, 500, 'linear', function () {
      // callback
  });
}

</p>

于 2012-07-25T14:11:37.047 に答える
2

私は少し前に同じ問題を抱えていましたが、これをまとめました。基本的には、無限スクロールのソリューションです。

編集:これがあなたのユースケースに合わせた私のコードです:

// Assuming you also have/want a scroll up
jQuery(".up-arrow").mousedown(function() {
    // You don't need to use jQuery instead of $ inside of jQuery defined functions 
    var offset = $("#technology_list").offset();
    var topValue = offset.top;
    if ((topValue * 2) < 1000) speed = topValue * 3;
    else if ((topValue * 2) < 500) speed = topValue * 4;
    else if ((topValue * 2) < 100) speed = topValue * 8;
    else speed = topValue * 2;

    $("#technology_list").animate({
        top: 0
    }, speed);

}).mouseup(function() {
    $("#technology_list").stop();
});

jQuery(".down-arrow").mousedown(function() {
    var offset = $("#technology_list").offset();
    var topValue = offset.top;
    var height = $("#technology_list").height();
    if (((height - topValue) * 2) < 1000) speed = (height - topValue) * 2;
    else if (((height - topValue) * 2) < 500) speed = (height - topValue) * 2;
    else if (((height - topValue) * 2) < 100) speed = (height - topValue) * 2;
    else speed = (height - topValue) * 2;

    $("#technology_list").animate(function() {
        top: $("#technology_list").height()
    }, speed);


}).mouseup(function() {
    $("#technology_list").stop();
});​

編集終了。

$(".scroll-left").hover(function() {

    if (($(this).parent().scrollLeft() * 2) < 1000) speed = $(this).parent().scrollLeft() * 3;
    // If it is less than 500 pixels from the edge, then it takes 3 times as long as the scrollLeft value in milliseconds. (Sorry about the if's being hard to read)

    else if (($(this).parent().scrollLeft() * 2) < 500) speed = $(this).parent().scrollLeft() * 4;
    // And if it is less than 250  pixels, it takes 4 times as long

    else if (($(this).parent().scrollLeft() * 2) < 100) speed = $(this).parent().scrollLeft() * 8;
    // Less than 50, it takes 8 times as long

    else speed = $(this).parent().scrollLeft() * 2;
    // And if it is more than 500 run it at 2 milliseconds per pixel

    $(this).parent().animate({
        scrollLeft: 0
    }, speed);
    // Scroll it to the beginning at the above set speed
}, function() {
    $(this).parent().stop();
    // On mouseOut stop the animation
});

$(".scroll-right").hover(function() {
    parent = $(this).parent()[0];
    parentWidth = $(this).parent()[0].scrollWidth;
    // Cache parent and parentWidth (stops delay on hover)

    if (((parentWidth - parent.scrollLeft) * 2) < 1000) speed = (parentWidth - parent.scrollLeft) * 2;
    // Pretty much the same thing as before but this time it sort of makes a "scrollRight"

    else if (((parentWidth - parent.scrollLeft) * 2) < 500) speed = (parentWidth - parent.scrollLeft) * 2;

    else if (((parentWidth - parent.scrollLeft) * 2) < 100) speed = (parentWidth - parent.scrollLeft) * 2;

    else speed = (parentWidth - parent.scrollLeft) * 2;

    $(this).parent().animate({
        scrollLeft: $(this).siblings(".row-scroll").width()
    }, speed);
    // Same thing as before, but this time we scroll all the way to the right side
}, function() {
    $(this).parent().stop();
});​

これは私のコードから直接コピーされたものですが、アイデアは健全です。端に近づくと、乗算によって速度が低下します。

完璧またはそれに近いものではありません。さらに微調整が必​​要な場合は、一時停止を試してください。

于 2012-07-25T13:52:59.927 に答える
1

jQuery プラグイン ScrollTo を使用してみることができます: http://demos.flesler.com/jquery/scrollTo/

于 2012-07-25T13:50:57.987 に答える