制作一个带有滚动条的圆形 slider 。 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)'});
};
});
最佳答案
尝试给 css3 过渡一些时间。
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
另请注意,永恒滚动部分会增加 wrapper 的高度,因此每次滚动后,旋转速度都会增加。尝试保持 wrapper 的高度不变,并在每次滚动后将 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 中的来源
关于javascript - 带滚动的圆形 slider (jquery+css3),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15006000/