Question

我正在尝试在我的鼠标点击的位置制作一个gif img，但由于某种原因，gif并不想去找我使用style.top和style.left请求的位置。有人能帮助我吗？

这里我尝试创建并在鼠标单击时放置gif img。

setInterval(checkCursor, 1);
    function checkCursor(){
        document.body.onclick = function(){
            console.log(parseFloat(cursorX) + ', ' + cursorY);

            var explo = document.createElement("img");
            explo.src = "explosive.gif?" + new Date().getTime();
            explo.style.position = "absolute";
            explo.style.top = cursorY;
            explo.style.left = cursorX;
            explo.style.pointerEvents = "none";
            document.body.appendChild(explo);
            setTimeout(function(){explo.remove();}, 800);
        }
    }

这里我搜索鼠标位置

var cursorX;
        var cursorY;
        document.onmousemove = function(e){
            cursorX = e.pageX-100;
            cursorY = e.pageY-100;
        }

-100是将gif文件置于鼠标中心

这是所有代码：

    <!DOCTYPE html>
<html>
    <head>
        <title> Menu </title>
        <style>
            #nav {
                display: block;
                position: fixed;
                top: 0;
                left: 0;
                overflow-x: hidden;
                transition: 0.5s;
                background-color: grey;
                color: black;
                width: 0;
                height: 100%;
            }
            nav a { text-decoration: none; cursor: pointer; display: block; color: white; padding-top: 5px; padding-bottom: 5px; padding-right: 50px; padding-left: 30px; }
            nav a:hover { background-color: black; transition: 0.3s; }
            #menu { transition: 0.3s; }
            section { position: absolute; z-index: -1; width: 99%; height: 98%; }

            #header {
                background-color: red;
                color: black;
                text-align: center;
                margin-left: 25%;
                width: 50%;
            }
        </style>
    </head>
    <body bgcolor="black">
        <video id="videoplayback" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.0;" src ="videoplayback.mp4" loop/></video>
        <section id="body">
            <nav id="nav">
                <span id="menu">Menu</menu>
                <a id="btncls"onclick="closeMenu()" style="float: right; padding: 5px; margin: 5px; font-size: 10px;">X</a>
                <div style="top: 50px; position: fixed;" id="menu">
                    <a onclick="openIndex()">Home</a>
                    <a onclick="openClub()">Club</a>
                    <a href="http://www.helenpark.nl">Helenparkhurst</a>
                </div>
            </nav>
            <section id="index">
                <header>
                    <button onclick="openMenu()">Open menu</button>
                </header>
            </section><section id="club">
                <header>
                    <button onclick="openMenu()">Open menu</button>
                </header><article>
                    <div id="choice" style="width: 100%; height: 100%;"><button onclick="join()">Join</button> | <button id="leave" onclick="leave()">Never</button></div>
                    <p id="header">
                        <span style="font-size: 32px">Welcome to the Megumin club !!!</span>
                    </p>
                </article><footer>

                </footer>
            </section>
        </section>
        <script>
            document.getElementById("menu").style.visibility = "hidden";

            document.getElementById("club").style.visibility = "hidden";

            function openIndex(){
                document.getElementById("club").style.visibility = "hidden";
                document.getElementById("index").style.visibility = "visible";

                closeMenu();
            }
            function openClub(){
                document.getElementById("index").style.visibility = "hidden";
                document.getElementById("club").style.visibility = "visible";

                closeMenu();
            }

            function openMenu(){
                document.getElementById("nav").style.width = "17%";
                document.getElementById("menu").style.opacity = "1.0";
                document.getElementById("btncls").style.opacity = "1.0";
                document.getElementById("menu").style.visibility = "visible";
            }
            function closeMenu(){
                document.getElementById("nav").style.width = "0";
                document.getElementById("menu").style.opacity = "0.0";
                document.getElementById("btncls").style.opacity = "0.0";
                setTimeout(function(){document.getElementById("menu").style.visibility = "hidden";}, 500);
            }

            var cursorX;
            var cursorY;
            document.onmousemove = function(e){
                cursorX = e.pageX-100;
                cursorY = e.pageY-100;
            }

            function join(){
                var video = document.getElementById("videoplayback");
                video.play();

                document.getElementById('choice').remove();

                setInterval(checkCursor, 1);
                function checkCursor(){
                    document.body.onmouseup = function(){
                        console.log(parseFloat(cursorX) + ', ' + cursorY);

                        var explo = document.createElement("img");
                        explo.src = "explosive.gif?" + new Date().getTime();
                        explo.style.position = "absolute";
                        explo.style.top = cursorY;
                        explo.style.left = cursorX;
                        explo.style.pointerEvents = "none";
                        document.body.appendChild(explo);
                        setTimeout(function(){explo.remove();}, 800);

                        document.getElementById("videoplayback").style.opacity = "0.1";
                        setTimeout(function(){document.getElementById("videoplayback").style.opacity = "0.0";}, 1000);
                    }   
                }
            }
            function leave(){
                document.getElementById("choice").style.position = "relative";
                var rand1 = Math.floor(Math.random() * (600 - 30 + 1)) + 30;
                document.getElementById("choice").style.top = rand1;
                var rand2 = Math.floor(Math.random() * (1300 - 30 + 1)) + 30;
                document.getElementById("choice").style.left = rand2;
                console.log(rand1+', '+rand2);
            }
        </script>
    </body>
</html>

Answer 1

您需要将px附加到坐标：

explo.style.top = cursorY + "px";
explo.style.left = cursorX + "px";

Answer 2

这看起来像是一个CSS问题。

将position: relative;添加到body元素。

body {
  position: relative;
}

如果您的body元素为空，您还需要将其拉伸到窗口的高度。

html, 
body {
  height: 100%;
}

position：绝对不使用style.top和style.left

2 个答案: