加了 DOCTYPE 以后js飘动效果失效解决办法

js教程

首页 > HTML教程 > js教程 >

 admin  2017-07-07 09:40:11 

网上的一段代码，注意下面的代码是没有DOCTYPE申明的，不过运行正常，但是加了DOCTYPE以后，代码失效

var xPos = 300;

var yPos = 200;

var step = 1;

var delay = 30;

var height = 0;

var Hoffset = 0;

var Woffset = 0;

var yon = 0;

var xon = 0;

var pause = true;

var interval;

var img1 = document.getElementById("img1");

img1.style.top = yPos;

function changePos()

{

    width = document.body.clientWidth;

    height = document.body.clientHeight;

    Hoffset = img1.offsetHeight;

    Woffset = img1.offsetWidth;

    img1.style.left = xPos + document.body.scrollLeft;

    img1.style.top = yPos + document.body.scrollTop;

    if (yon)

        {yPos = yPos + step;}

    else

        {yPos = yPos - step;}

    if (yPos < 0)

        {yon = 1;yPos = 0;}

    if (yPos >= (height - Hoffset))

        {yon = 0;yPos = (height - Hoffset);}

    if (xon)

        {xPos = xPos + step;}

    else

        {xPos = xPos - step;}

    if (xPos < 0)

        {xon = 1;xPos = 0;}

    if (xPos >= (width - Woffset))

        {xon = 0;xPos = (width - Woffset);   }

    }



    function start()

     {

        img1.visibility = "visible";

        interval = setInterval('changePos()', delay);

    }

    function pause_resume()

    {

        if(pause)

        {

            clearInterval(interval);

            pause = false;}

        else

        {

            interval = setInterval('changePos()',delay);

            pause = true;

            }

        }

    start();

这是因为DOCTYPE是不能使用document.body的，一定要改成document.documentElement，还有就是不要忘记了"px"，这很重要，浏览器都是以像素运算的。

var xPos = 300;

var yPos = 200;

var step = 1;

var delay = 30;

var height = 0;

var Hoffset = 0;

var Woffset = 0;

var yon = 0;

var xon = 0;

var pause = true;

var interval;

var img1 = document.getElementById("img1");

img1.style.top = yPos;

function changePos()

{

    width = document.documentElement.clientWidth;

    height = document.documentElement.clientHeight;

    Hoffset = img1.offsetHeight;

    Woffset = img1.offsetWidth;

    img1.style.left = xPos + document.documentElement.scrollLeft + "px";

    img1.style.top = yPos + document.documentElement.scrollTop + "px";

    if (yon)

        {yPos = yPos + step;}

    else

        {yPos = yPos - step;}

    if (yPos < 0)

        {yon = 1;yPos = 0;}

    if (yPos >= (height - Hoffset))

        {yon = 0;yPos = (height - Hoffset);}

    if (xon)

        {xPos = xPos + step;}

    else

        {xPos = xPos - step;}

    if (xPos < 0)

        {xon = 1;xPos = 0;}

    if (xPos >= (width - Woffset))

        {xon = 0;xPos = (width - Woffset);   }

    }



    function start()

     {

        img1.visibility = "visible";

        interval = setInterval('changePos()', delay);

    }

    function pause_resume()

    {

        if(pause)

        {

            clearInterval(interval);

            pause = false;}

        else

        {

            interval = setInterval('changePos()',delay);

            pause = true;

            }

        }

    start();