带滚动的圆形滑块(jquery+css3)
Circular slider with scrolling (jquery+css3)
本文关键字:jquery+css3 滚动 更新时间:2023-09-26
制作一个滚动的圆形滑块。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;
还要注意,永恒卷轴部分增加了包装纸的高度,所以每次滚动后,旋转速度都会增加。尝试保持包装的高度不变,并在每次滚动后将滚动条设置为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 中的源
相关文章:
- Safari(Mac OS)上的jQuery平滑滚动问题
- jquery平滑滚动问题
- jQuery表格滚动
- jQuery平滑滚动
- jQuery平滑滚动未滚动
- jQuery Div滚动功能:IE中的问题
- jQuery-无限滚动
- jQuery 无限滚动不触发
- 使用 jQuery 在滚动时平滑过渡图像
- 使用 jQuery 限制滚动时的垂直背景位置
- 如何使用 jQuery 在滚动时更改类
- JQuery 自动滚动到底部(但在鼠标滚动时禁用)
- 我想要一个类似于网站 https://onlycoin.com/ 的jQuery鼠标滚动动画效果
- 使用 nameProp 的 JQuery 图像滚动更新在 Firefox 和 Chrome 中不起作用
- jQuery悬停滚动,只需要一点帮助
- jQuery脚本滚动在iDevices上不兼容
- 将 jQuery 和 CSS3 滚动效果从功能垂直滚动转换为所需水平滚动的问题
- CSS3 和 jQuery 在滚动位置上制作动画
- 带滚动的圆形滑块(jquery+css3)
- CSS3滚动到没有JQuery的页面