JavaScript теряет функцию перемещения изображения при использовании DOCTYPE - PullRequest
Новая
       0

JavaScript теряет функцию перемещения изображения при использовании DOCTYPE

1 голос
/ 10 октября 2011

У меня здесь есть JavaScript, который предполагает, что изображение (призрак) появляется на экране, немного облетает, а затем исчезает, а затем повторяется позже. Сценарий прекрасно работает без DOCTYPE в моем документе, однако, если я добавлю какие-либо DOCTYPE, сработает только появление / исчезновение. По некоторым причинам это не перемещается на экране. DOCTYPE мне нужно использовать: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Это сводит меня с ума, и я не могу понять, как сделать его совместимым. Мне просто нужно, чтобы часть движения работала с DOCTYPE. Любая помощь с этим была бы очень признательна. Ниже приведен скрипт: 

if(!window.JSFX) JSFX=new Object();
JSFX.ghostImages = new Array( 
    "<img src='/ghost.png'>",
    "<img src='/ghost2.png'>"
);
var ns4 = document.layers;
var ie4 = document.all;
JSFX.makeLayer = function(id)
{
    var el =        document.getElementById ? document.getElementById(id) :
                    document.all            ? document.all[id] :
                                                      document.layers[id];
    if(ns4) el.style=el;
    el.sP=function(x,y){this.style.right = x;this.style.top=y;};
    el.show=function(){ this.style.visibility = "visible"; } 
    el.hide=function(){ this.style.visibility = "hidden"; } 
    if(ns4 || window.opera) 
            el.sO = function(pc){return 0;};
    else if(ie4)
            el.sO = function(pc)
            {
                    if(this.style.filter=="")
                            this.style.filter="alpha(opacity=100);";
                    this.filters.alpha.opacity=pc;
            }
    else
            el.sO = function(pc)
{
this.style.opacity=pc/100;
}

    return el;
}

if(window.innerWidth)
{
    gX=function(){return innerWidth;};
    gY=function(){return innerHeight;};
}
else
{
    gX=function(){return document.body.width-50;};
    gY=function(){return document.body.height-50;};
}
JSFX.ghostOutput=function()
{
    for(var i=0 ; i<JSFX.ghostImages.length ; i++)
            document.write(ns4 ? "<LAYER  NAME='gh"+i+"'>"+JSFX.ghostImages[i]+"<\/LAYER>" : 
                                       "<DIV id='gh"+i+"'     style='position:absolute'>"+JSFX.ghostImages[i]+"<\/DIV>" );

}
JSFX.ghostSprites = new Array();
JSFX.ghostStartAni = function()
{
    for(var i=0 ;i<JSFX.ghostImages.length;i++)
    {
            var el=JSFX.makeLayer("gh"+i);
            el.x=Math.random()*gX();
            el.y=Math.random()*gY();
            el.tx=Math.random()*gX();
            el.ty=Math.random()*gY();
            el.dx=-5+Math.random()*10;
            el.dy=-5+Math.random()*10;
            el.state="off";
            el.op=0;
            el.sO(el.op);
            el.hide();
            JSFX.ghostSprites[i] = el;
    }
    setInterval("JSFX.ghostAni()", 40);
}
JSFX.ghostAni = function()
{
    for(var i=0 ;i<JSFX.ghostSprites.length;i++)
    {
            el=JSFX.ghostSprites[i];

            if(el.state == "off")
            {
                    if(Math.random() > .99)
                    {
                            el.state="up";
                            el.show();
                    }
            }
            else if(el.state == "on")
            {
                    if(Math.random() > .98)
                            el.state="down";
            }
            else if(el.state == "up")
            {
                    el.op += 2;
                    el.sO(el.op);
                    if(el.op==100)
                            el.state = "on";
            }
            else if(el.state == "down")
            {
                    el.op -= 2;
                    if(el.op==0)
                    {
                            el.hide();
                            el.state = "off";
                    }
                    else
                            el.sO(el.op);
            }

            var X = (el.tx - el.x);
            var Y = (el.ty - el.y);
            var len = Math.sqrt(X*X+Y*Y);
            if(len < 1) len = 1;
            var dx = 20 * (X/len);
            var dy = 20 * (Y/len);
            var ddx = (dx - el.dx)/10;
            var ddy = (dy - el.dy)/10;
            el.dx += ddx;
            el.dy += ddy;
            el.sP(el.x+=el.dx,el.y+=el.dy);

            if(Math.random() >.95 )
            {
                    el.tx = Math.random()*gX();
                    el.ty = Math.random()*gY();
            }

    }
}
JSFX.ghostStart = function()
{
    if(JSFX.ghostLoad)JSFX.ghostLoad();
    JSFX.ghostStartAni();
}
JSFX.ghostOutput();
JSFX.ghostLoad=window.onload;
window.onload=JSFX.ghostStart;

Вот пример сценария на странице без DOCTYPE: http://boomansion.net/test.php

... и пример на странице с DOCTYPE (смотрите в самом низу): http://boomansion.net/test2.php

Заранее спасибо!

1 Ответ

4 голосов
/ 10 октября 2011

Вы устанавливаете настройки top и left для чисел, но они принимают длины (и ненулевые длины должны иметь единицу).

Когда вы добавляете Doctype,браузеры:

  • Предположим, вы знаете, что делаете
  • Более точно следуйте спецификации
  • (следовательно) более соответствуют друг другу
  • (Следовательно) будет обрабатывать больше ошибок как «значения, которые нужно игнорировать», а не «значения, которые нужно исправить автоматически».

Возможно, вы захотите + "px".

...