0

在我正在处理的页面中,当用户单击一个对象时,一个 SVG 组会旋转,而另一个 SVG 组会旋转。

代码在 WebKit 中运行良好,但在 Gecko 中根本无法运行。以下是 Gecko 未执行的代码块:

var totStep = dur*2/msrate, step=0;
window.timer = window.setInterval(function(){
    if(step<totStep/2){
    var inangle = -50*easeIn(step,totStep/2);
    iris.setAttribute("transform","rotate("+inangle+" 23 -82)");}else{
    var prog = easeOut2((step-(totStep/2)),totStep/2);
    var outangle = 50*prog;
    var down = 400*prog;
    vinyl.setAttribute("transform","rotate("+(-50+outangle)+" 986 882)");
    needle1.setAttribute("transform","translate(0 "+(-400+down)+")");
    buttons.setAttribute("transform","translate(0 "+(-400+down)+")");}
    step++;
    if (step > totStep) {window.clearInterval(window.timer); return}
});

大部分代码改编自一个在页面加载时打开眼睛的函数,并且该函数在 Gecko 中运行良好,这就是为什么这对我来说很神秘。

您可以在此页面上查看该页面及其所有源代码。有问题的函数写在链接的eye.js中。当用户单击菜单的“音乐”部分下的“DJ Docroot”时会出现问题,该菜单可通过单击任意位置访问。

4

1 回答 1

0

您缺少 setInterval 的第二个参数来指定调用函数的时间间隔。因此,例如,以下代码有效:

window.timer = window.setInterval(function(){
    if(step<totStep/2){
    var inangle = -50*easeIn(step,totStep/2);
    iris.setAttribute("transform","rotate("+inangle+" 23 -82)");}else{
    var prog = easeOut2((step-(totStep/2)),totStep/2);
    var outangle = 50*prog;
    var down = 400*prog;
    vinyl.setAttribute("transform","rotate("+(-50+outangle)+" 986 882)");
    needle1.setAttribute("transform","translate(0 "+(-400+down)+")");
    buttons.setAttribute("transform","translate(0 "+(-400+down)+")");}
    step++;
    if (step > totStep) {window.clearInterval(window.timer); return}
},10);

Webkit 可能只是假设一个默认值。

此外,只是一个建议,如果您采用可以使您的代码更清晰的代码约定,将来可能更容易发现此类错误:http: //javascript.crockford.com/code.html

jslint这样的工具将对此有所帮助。

于 2010-07-31T21:56:27.090 回答