Question

所有

这里有一个新手，但有人可以查看这段代码，让我知道我哪里出错了吗？

我想要实现什么效果：我在网页上有大约9个div，包括图像和文本，当用户将鼠标悬停在div内的图像上时，文本会聚焦。我希望这些div“出现”在页面上浮动。

所以我做了：我绝对在网页上使用CSS定位div。现在我使用JS将div从他们的位置移动到页面上的设置位置（将为每个div执行此操作）并尝试将随机移动的效果赋予div。这是代码：

        <script language="javascript">
            var x = document.getElementById("cr001").style.left;
            var y = document.getElementById("cr001").style.top;
            var d_x = 75;
            var d_y = 100;
            var interval = 2;                   //move by only 2px...

            function moveImage() {
                if(x < d_x) x = x + interval;
                if(y < d_y) y = y + interval - 1;                   //move y by only 1px

                document.getElementById("cr001").style.left = x+'px';
                document.getElementById("cr001").style.top = y+'px';

                if ((x + interval < d_x) && (y + interval < d_y)) {
                    window.setTimeout('moveImage()',100);
                }
            }   
    </script>   
</head>

<body onload="moveImage()">
    <div id="blackhole"><img src="img/bimg.png" alt="blackhole" /></div>
    <div id="container">

            <div id="cr001" class="twinkles">
                <a href="#">
                <img src="img/cr.png" alt="Co is about your freedom" />
                <span>Co is about your freedom</span></a>

    </div>

</body>

有人可以解释我哪里出错吗？

干杯，

Answer 1

问题在于：

document.getElementById("cr001").style.left

这实际上返回了css值，这是一个字符串，例如'100px'或'10％'等。但是，稍后在您的代码中，您将此值用作整数。

Answer 2

根据精炼的帖子，我现在看到您正试图通过var x = document.getElementById("cr001").style.left;

访问头部的正文内容

这不起作用，因为当头部被装载时，身体还没准备好。你应该创建一个如下所示的init（）函数：

function init(){
    window.x = document.getElementById("cr001").style.left;
    window.y = document.getElementById("cr001").style.top;
    moveImage();
}

然后将其附加到身体上。

编辑：好的，这里有一些修改后的代码可以满足您的需求。您可以将其粘贴在名为index.html的文件中，然后在Firefox中启动它。我为你打破了它：

<html>
<head> 
    <script language="javascript">
        var d_x = 75;
        var d_y = 100;
        var interval = 2;                   

        //init is used for getting things up and running once the page is loaded
        function init(){
            //optimization: only get the element once
            var el = document.getElementById("cr001")
            x = parseInt(el.style.left);
            if(isNaN(x)){
                //parseInt("") == NaN
                x = 0;
            }
            y = parseInt(el.style.top);
            if(isNaN(y)){
                //ditto
                y = 0;
            }
            //call the nuts of this script
            moveImage();
        }

        //this is mostly unchanged
        function moveImage() {
            if(x < d_x){
                x = x + interval;
            }else{
                //lets keep looping just for fun!
                x = 0;
            }
            if(y < d_y){
                y = y + interval - 1;                   //move y by only 1px
            }else{
                y = 0;
            }

            //optimization: only get the element once
            var el = document.getElementById("cr001")
            el.style.left = x + 'px'; //dont forget to add 'px' back in
            el.style.top = y + 'px';

            //loop, don't use strings in setTimeout since this is basically eval...eval is evil
            setTimeout(moveImage, 100);

        }   
    </script>   
</head>
<body onload="init()">
    <div id="container">
            <!-- IMPORTANT: POSITION IS ABSOLUTE -->
            <div id="cr001" style="position:absolute; width:10px; height:10px; background-color:black"></div>
    </div>
</body>

Answer 3

你有一个未公开的div。您打开<div id="container">和<div id="cr001" class="twinkles">但只关闭其中一个

使用JS在页面周围移动div

3 个答案: