Question

我正在尝试在javascript中构建一个简单的Tween类。代码类似于：

function Tween(object, parameters) {      // constructor-class def.
    this.object = object;
    this.parameters = parameters;
    this.isRunning = true;
    this.frameRate = some value;
    this.timeElapsed = some value;
    this.duration = some value;
}

Tween.prototype.drawFrame = function () {
    var self = this;
    this.nextFrame();
    if (this.isRunning)
        setTimeout( function () { self.drawFrame() } , 1000 / frameRate);
}

Tween.prototype.nextFrame = function () {
    if (this.timeElapsed < this.duration) {
                // calculate and update the parameters of the object
    } else
        this.isRunning = false;
}

Tween.prototype.start = function () {
    this.isRunning = true;
    this.drawFrame();
}

然后由另一个脚本调用，例如main.js：

window.onload = init;

init = function() {

var tweenDiv = document.createElement('div');
tweenDiv.id = 'someDiv';
document.body.appendChild(tweenDiv);
var myTween = new Tween(document.getElementById('someDiv').style, 'left', parameters);
myTween.start();

}

不幸的是，这不起作用。如果我使用Google Chrome开发人员工具检查我的网站，someDiv的left-style-attribute设置为参数中设置的像素数。但它不会在屏幕上移动。

有人知道我做错了什么吗？为什么不重新绘制someDiv？

多少被忽视

Answer 1

您必须将position样式设置为absolute，fixed或relative才能使left样式生效。

javascript中简单补间类的问题

1 个答案: