脚本仅在alert()未转义时有效?

时间:2011-05-06 06:54:16

标签: javascript

我有一个可以在IE和Chrome中运行但不在FF中运行的脚本..或者如果我不知道'x'被警告的行,它可以在所有三个中运行吗?

在FF 3.6中,当脚本完成一半时div首先可见..它只是跳到“移动线”的中间

<div id="tst" style="position:absolute; top:200px; left:200px; height:100px; width:100px; background:#ff0000"></div>

<script type="text/javascript">
    function Tween(){
        this.time = 0;
        this.duration = 800;
        this.x_start = 0;
        this.x_end = 0;

        this.target_func = null;

        this.method_func = null;
        this.loop = null;
        this.interval = 20;

        this.start = function(){
            if(!this.method_func){
                this.method_func = this.regularEaseOut;
            }

            var _this = this;
            this.loop = setInterval(function(){
                if(_this.set_time() > 0){
                    var x = _this.method_func();
                    //alert(x);
                    _this.target_func(x);
                }
            }, this.interval);
        };

        this.set_time = function(){
            this.time += this.interval;
            if(this.time > this.duration){
                clearInterval(this.loop);
                this.time = 0;
            }

            return this.time;
        };

        this.regularEaseInOut = function(){
            var t = this.time;
            var s = this.x_start;
            var e = this.x_end;
            var d = this.duration;

            if((t/=d/2) < 1){
                return c/2*t*t + b;
            }
            else{
                return -c/2 * ((--t)*(t-2) - 1) + b;
            }
        };

        this.regularEaseIn = function(){
            var t = this.time;
            var s = this.x_start;
            var e = this.x_end;
            var d = this.duration;

            return c*(t/=d)*t + b;
        };

        this.regularEaseOut = function(){
            var t = this.time;
            var s = this.x_start;
            var e = this.x_end;
            var d = this.duration;

            return -e *(t/=d)*(t-2) + s;
        };
    }

    var Tween = new Tween();
    Tween.x_start = 200;
    Tween.x_end = 1200;
    Tween.target_func = function(x){
        document.getElementById('tst').style.left = x+'px';
    };
    Tween.start();
</script>

3 个答案:

答案 0 :(得分:1)

这有效:

<html>
<head>
  <script type="text/javascript">
      function Tween(){
          this.time = 0;
          this.duration = 800;
          this.x_start = 0;
          this.x_end = 0;

          this.target_func = null;

          this.method_func = null;
          this.loop = null;
          this.interval = 20;

          this.start = function(){
              if(!this.method_func){
                  this.method_func = this.regularEaseOut;
              }

              var _this = this;
              this.loop = setInterval(function(){
                  if(_this.set_time() > 0){
                      var x = _this.method_func();
                      //alert(x);
                      _this.target_func(x);
                  }
              }, this.interval);
          };

          this.set_time = function(){
              this.time += this.interval;
              if(this.time > this.duration){
                  clearInterval(this.loop);
                  this.time = 0;
              }

              return this.time;
          };

          this.regularEaseInOut = function(){
              var t = this.time;
              var s = this.x_start;
              var e = this.x_end;
              var d = this.duration;

              if((t/=d/2) < 1){
                  return c/2*t*t + b;
              }
              else{
                  return -c/2 * ((--t)*(t-2) - 1) + b;
              }
          };

          this.regularEaseIn = function(){
              var t = this.time;
              var s = this.x_start;
              var e = this.x_end;
              var d = this.duration;

              return c*(t/=d)*t + b;
          };

          this.regularEaseOut = function(){
              var t = this.time;
              var s = this.x_start;
              var e = this.x_end;
              var d = this.duration;

              return -e *(t/=d)*(t-2) + s;
          };
      }

      function doYourThing() {
        var tween = new Tween();
        tween.x_start = 200;
        tween.x_end = 1200;
        tween.target_func = function(x){
            document.getElementById('tst').style.left = x+'px';
        };
        tween.start();
      }
  </script>
</head>
<body onload="doYourThing()">
  <div id="tst" style="position:absolute; top:200px; left:200px; height:100px; width:100px; background:#ff0000"></div>
</body>
</html>

因此,使用onload可确保仅在加载文档后运行该方法。此外,您创建了一个实例变量(Tween),其名称与要实例化的“类”相同。这肯定会让你在路上感到痛苦和痛苦。

答案 1 :(得分:0)

alert停止执行代码,直到按下Ok。检查这是否是您问题的根源。

答案 2 :(得分:0)

这意味着什么不起作用?

如果你的意思是它没有向右移动,它在我的FF 4.0.1中适用于我