Javascript 带滚动的圆形滑块（jquery+；css3）

制作一个滚动的圆形滑块。在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)'});
    };
});

myDiv.scroll（函数（）{
$newh=$（'#wrapper_sl'）.height（）+$（this.scrollTop（）；//永恒滚动
$（'#wrapper_sl'）。高度（$newh）；//永恒卷轴
var$nower=（$（this.scrollTop（）+$start\u pr）/$skorost）+$ugol*8；
对于（var ink=0，len=$kolvo；ink

试着给css3转换留出一些时间

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

还要注意的是，永恒的滚动部分增加了包装的高度，所以每次滚动后，旋转速度都会增加。尝试保持包装的高度不变，并在每次滚动后将scrolltop设置为0

--编辑

我希望这对你有帮助。请参阅中的演示

$（函数（）{
旋转（）；
myDiv.bind（'scroll.rot'，rotate'）；
myDiv.bind（'scroll'，$.debounce（250，函数（）{
$start_pr+=$（this.scrollTop（）；
$（此）.scrollTop（0）；
}));
});
函数rotate（）{
$.debounce（250，true，函数（）{}）；
var$nower=（$（this.scrollTop（）+$start\u pr）/$skorost）+$ugol*8；
对于（var ink=0，len=$kolvo；ink$deg:”+$deg）；
$（ImgDiv[墨水]）抵销({
顶部：Math.cos（$rad））*$size\u dug+$smes\u y，
左：Math.sin（$rad））*（$size\u-dug）+$smes\u-x
}).css({
“transform”：“skewX（-”+$deg+'deg）rotateX（“+$deg+'deg）”
});
};
}

---

这是

中的源代码，实际上我在Firefox中看不到这个问题，但在Chrome中它非常粗糙。只需刷新页面，不要滚动。图片将在一个圆中平滑对齐@DeviceYoungyes=（但这是我最好的想法/解决方案。如何重置滚动，但保持相同的位置？）滚动已解决）谢谢！但是仍然在跳跃和。。。差异=（哦…另一个问题…我将块设置为“位置：绝对”，并将“偏移量”替换为“css”，它停止跳跃=）但是。。。我不能滚动时，我超过块=((((((((((((((((((((((((((((

$(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)'
        });
    };
}