我想知道是否有更好的方法来处理这个问题,或者使用更少的文本,而不是使用一堆 if/else 语句。
目前我在动画过程中要处理图片更改:
link.animate({
top: '0'
}, {
duration: 3000*(Math.random()+1),
easing: 'easeOutBounce',
step: function(now, tween) {
if (now < -300){
$("#"+ link.data("shadow")).attr('src', '');
} else if (now < -250) {
$("#"+ link.data("shadow")).attr('src', ...);
} else if (now < -200) {
$("#"+ link.data("shadow")).attr('src', ...);
} ... etc.
如果我可以使用 switch 语句、三元运算符或“step”函数的对象来代替 if/else 语句,有人可以提供有关如何执行此操作的示例吗?提前致谢。
最佳答案
据我所知,您需要基于 50px
差异的不同图像。 50 是这里的关键。我建议使用源数组,其中较低的 px
是数组中的第一个:
var arr = ['srcFor0px', 'srcFor50px', 'srcFor100px', 'srcFor150px', 'srcFor200px'...];
然后,知道您的较低值是多少(在本例中 -300 是较低值)。然后,您需要将最小值添加到当前值:
var comparison = now - -300
之后,您需要对结果除以 50 进行数学 ceil。
var index = Math.ceil(comparison / 50);
那么剩下的唯一事情就是查看索引是否入站。基本上,只需检查索引是否低于 0 或高于数组长度:
if(index < 0) index = 0;
else if(index >= arr.length) index = arr.length-1;
然后你就得到了数组中的好源。最终代码如下所示:
step : function(now){
var arr = ['srcFor-300px', 'srcFor-250px', 'srcFor-200px', 'srcFor-150px', 'srcFor-100px'];
var comparison = now - -300
var index = Math.ceil(comparison / 50);
if(index < 0) index = 0;
else if(index >= arr.length) index = arr.length-1;
$("#"+ link.data("shadow")).attr('src', arr[index]);
}
关于javascript - 对于此动画的 "step"事件,使用开关、三元或对象而不是 if/else?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25998276/