Сircularslider with scrolling（jquery + css3）

Question

製作一個滾動的圓形滑塊。 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)'}); 
     }; 
    }); 

我剛學的jQuery。敬請諒解。 =）

Answer 1

嘗試給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