首先js代码如下
setTimeout(function() {
var a = 0,wdw1;
$($(".yscroll_list_left li")[0]).clone(!0).insertAfter($($(".yscroll_list_left li")[$(".yscroll_list_left li").length - 1]));
var len = $(".yscroll_list_left li").length;
b();
var old = Date.now();
function b() {
a -= 44;
if(a >= 44 * -(len - 2) ){
console.log("1_1",a,Date.now()-old);
$(".yscroll_list_left").animate({marginTop: a}, 2000);
console.log("1_2",a,Date.now()-old);
}
else{
$(".yscroll_list_left").animate({marginTop: a}, 2000, function() {
a = 0;
$(".yscroll_list_left").css({
marginTop: 0
})
});
}
wdw1 = setTimeout(b,3000);
}
}, 0);
在chrome中执行结果如下
test.html:42 1_1 -44 NaN
test.html:44 1_2 -44 NaN
test.html:42 1_1 -88 3001
test.html:44 1_2 -88 3003
test.html:42 1_1 -132 6003
test.html:44 1_2 -132 6004
test.html:42 1_1 -176 9004
test.html:44 1_2 -176 9005
上边的是一个不断循环重复的结果，只是以后的 -44后边的内容不再是NaN,而是具体数字了。
想不明白为什么Date.now()-old会得出NaN，如果是因为数太小的话，那么单独像下面一样
var old = Date.now();
console.log(Date.now() - old);
上述代码会输出 0 或者是 1，而非NaN
另外，在火狐上测试，结果和chrome一样，也是前两个 -44 后边为NaN，而以后的 -44后边就变为数字
上边的只是JS代码，下边是完整的代码，可以执行的
<!DOCTYPE html>
#yscroll_list{ height:16px; overflow:hidden; } #yscroll_listin{ position:relative; overflow:hidden; } #yscroll_listin ul { position:relative; margin-left:50px; } window.onload = function(){ setTimeout(function() { var a = 0,wdw1; $($(".yscroll_list_left li")[0]).clone(!0).insertAfter($($(".yscroll_list_left li")[$(".yscroll_list_left li").length - 1])); var len = $(".yscroll_list_left li").length; b(); var old = Date.now(); function b() { a -= 44; if(a >= 44 * -(len - 2) ){ console.log("1_1",a,Date.now()-old); $(".yscroll_list_left").animate({marginTop: a}, 500); console.log("1_2",a,Date.now()-old); } else{ $(".yscroll_list_left").animate({marginTop: a}, 500, function() { a = 0; $(".yscroll_list_left").css({ marginTop: 0 }) }); } wdw1 = setTimeout(b,1000); } }, 0); }
111
222
333
444
555
