-1
私はマウスをクリックした場所でgif imgを作成しようとしていますが、何らかの理由でGIFがstyle.topでリクエストした場所に行きたいと思っています。 style.left。誰か助けてくれますか？ポジション：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);
}
}
ここで私は-100
var cursorX;
var cursorY;
document.onmousemove = function(e){
cursorX = e.pageX-100;
cursorY = e.pageY-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>
は、あなたが問題を示す、最小限の作業例を提供することはできますか？ – jhpratt
'document.body.onclick'関数内で' console.log（cursorY） 'と' console.log（cursorX） 'を実行するとどうなりますか？また、あなたの現在の関数でメモリをリークしようとしている。 'checkCursor（）'関数を作成し、それをsetInterval関数に入れるのではなく、 'document.body.onclick'に割り当てます。 – kyle
私はブラウザでNaNを要求していないので、普通の番号を取得します –