Question

我正在制作基于旋转木马的Tumblr主题HERE，但我对动画非常失望。我可以添加任何东西：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2
/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js">
</script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle
/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript" src="http://malsup.github.com  
/jquery.easing.1.1.1.js">      
</script>
<script type="text/javascript">
$.fn.cycle.defaults.timeout = 6000;

$('#s7').cycle({ 
fx:    'scrollRight', 
speed: 'fast',
timeout: 0,
easeIn:  'bounceout', 
easeOut: 'backin', 
next:   '#next2', 
prev:   '#prev2'
});

function onBefore() {
$('#output').html("Scrolling image:<br>" + this.src);
//window.console.log(  $(this).parent().children().index(this) );
}
function onAfter() {
$('#output').html("Scroll complete for:<br>" + this.src)
    .append('<h3>' + this.alt + '</h3>');
}
</script>

使旋转木马的动画更流畅？

Answer 1

改变你的选择，交配。

$('#s7').cycle({
    fx: 'scrollRight',
    speed: 1000,
    timeout: 0,
    next: '#next2',
    prev: '#prev2',
    easing: 'easeinout'
});

Answer 2

我在将图像定义为CSS中的背景图像方面有很好的经验，而不是在HTML中使用实际标记。这大大增加了使用Bootstrap轮播和Chrome滚动的平滑度。这个标记/ CSS将是这样的：

HTML：

<div id="my-image">
</div>

CSS：

#my-image {
  background:url("image.png") no-repeat 0 0;
}

Answer 3

像这样的动画的平滑度（或缺乏）很大程度上取决于所使用的浏览器，以及正在使用的计算机（较慢的计算机=更多高跷的动画）。

您可以尝试使用更基于CSS3的方法（即不太依赖JS），但这仅限于现代浏览器（在这种情况下仅限于webkit）。

在旋转木马上创建更流畅的动画？

3 个答案: