3

スクロールで円形のスライダーを作ります。http://magart.com.ua/circle/ Mozilla でテスト済み!

ページを更新するだけでは問題が発生します。すべてがスムーズに進みます。(表示するには、ページをスクロールして更新する必要があります)。Mozilla でテスト済み! でもスクロールするとざらつきが出てきます。問題を解決するには？

コードの一部:

myDiv.scroll(function () { 
    $newh=$('#wrapper_sl').height()+$(this).scrollTop(); //eternal scroll
    $('#wrapper_sl').height($newh); //eternal scroll
    var $nower=(($(this).scrollTop()+$start_pr)/$skorost)+$ugol*8;
    for (var ink=0, len = $kolvo; ink < len; ink++)
    {
    $rad=((ink)*$ugol+$nower);
    $deg=$rad*360/(2*Math.PI)+270;

    $(ImgDiv[ink]).offset({top: Math.cos(($rad))*$size_dug+$smes_y, left: Math.sin(-($rad))*($size_dug)+$smes_x }).css({'transform':'skewX(-'+$deg+'deg) rotateX('+$deg+'deg)'});
    };
});
4

1 に答える 1

3

css3 の移行に少し時間を割いてみてください。

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;

また、エターナルスクロール部分はラッパーの高さが高くなるため、スクロールするたびに回転速度が速くなります。ラッパーの高さを変更せずに維持し、各スクロール後に scrolltop を 0 に設定してください。

- 編集

これがお役に立てば幸いです。jsFiddleでデモを見る

$(function () {
    rotate();
    myDiv.bind('scroll.rot', rotate);
    myDiv.bind('scroll', $.debounce(250, function () {
        $start_pr += $(this).scrollTop();
        $(this).scrollTop(0);
    }));
});

function rotate() {
    $.debounce(250, true, function () {});
    var $nower = (($(this).scrollTop() + $start_pr) / $skorost) + $ugol * 8;
    for (var ink = 0, len = $kolvo; ink < len; ink++) {
        $rad = ((ink) * $ugol + $nower);
        $deg = $rad * 360 / (2 * Math.PI) + 270;

        $('#info').html(
            '$rad: ' + $rad +
            '<br/>$deg: ' + $deg);

        $(ImgDiv[ink]).offset({
            top: Math.cos(($rad)) * $size_dug + $smes_y,
            left: Math.sin(-($rad)) * ($size_dug) + $smes_x
        }).css({
            'transform': 'skewX(-' + $deg + 'deg) rotateX(' + $deg + 'deg)'
        });
    };
}

ここにjsFiddleのソースがあります

于 2013-02-21T15:42:35.583 に答える