Javascript 位置：绝对不使用style.top和style.left
我正在尝试在鼠标单击的位置制作gif图像，但由于某些原因，gif不想转到我使用style.top和style.left请求的位置。有人能帮我吗 在这里，我尝试创建gif图像并将其放置在鼠标点击上Javascript 位置：绝对不使用style.top和style.left,javascript,Javascript,我正在尝试在鼠标单击的位置制作gif图像，但由于某些原因，gif不想转到我使用style.top和style.left请求的位置。有人能帮我吗 在这里，我尝试创建gif图像并将其放置在鼠标点击上 setInterval(checkCursor, 1); function checkCursor(){ document.body.onclick = function(){ console.log(parseFloat(cursorX) + ', '
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;
}
<!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>
菜单
#导航{
显示：块；
位置：固定；
排名：0；
左：0；
溢出x：隐藏；
过渡：0.5s；
背景颜色：灰色；
颜色：黑色；
宽度：0；
身高：100%；
}
导航a{文本装饰：无；光标：指针；显示：块；颜色：白色；顶部填充：5px；底部填充：5px；右侧填充：50px；左侧填充：30px；}
导航a:悬停{背景色：黑色；过渡：0.3s；}
#菜单{转换：0.3s；}
截面{位置：绝对；z索引：-1；宽度：99%；高度：98%；}
#标题{
背景色：红色；
颜色：黑色；
文本对齐：居中；
左边缘：25%；
宽度：50%；
}
菜单
打开菜单
打开菜单
加入|永不
欢迎来到美光俱乐部！！！
document.getElementById（“菜单”）.style.visibility=“隐藏”；
document.getElementById（“俱乐部”）.style.visibility=“隐藏”；
函数openIndex（）{
document.getElementById（“俱乐部”）.style.visibility=“隐藏”；
document.getElementById（“索引”）.style.visibility=“可见”；
关闭菜单（）；
}
函数openClub（）{
document.getElementById（“索引”）.style.visibility=“隐藏”；
document.getElementById（“俱乐部”）.style.visibility=“可见”；
关闭菜单（）；
}
函数openMenu（）{
document.getElementById（“nav”）.style.width=“17%”；
document.getElementById（“菜单”）.style.opacity=“1.0”；
document.getElementById（“btncls”）.style.opacity=“1.0”；
document.getElementById（“菜单”）.style.visibility=“可见”；
}
函数关闭菜单（）{
document.getElementById（“nav”）.style.width=“0”；
document.getElementById（“菜单”）.style.opacity=“0.0”；
document.getElementById（“btncls”）.style.opacity=“0.0”；
setTimeout（function（）{document.getElementById（“menu”）.style.visibility=“hidden”}，500）；
}
var cursorX；
变量粗略；
document.onmousemove=函数（e）{
cursorX=e.pageX-100；
粗略=e.pageY-100；
}
函数连接（）{
var video=document.getElementById（“视频播放”）；
video.play（）；
document.getElementById（'choice'）.remove（）；
设置间隔（选中光标，1）；
函数checkCursor（）{
document.body.onmouseup=函数（）{
log（parseFloat（cursorX）+'，'+cursorY）；
var expo=document.createElement（“img”）；
explo.src=“explosive.gif？”+新日期（）.getTime（）；
expo.style.position=“绝对”；
expo.style.top=粗略；
expo.style.left=cursorX；
expo.style.pointerEvents=“无”；
文件.正文.附件（expo）；
setTimeout（函数（）{expo.remove（）；}，800）；
document.getElementById（“videoplayback”）.style.opacity=“0.1”；
setTimeout（函数（）{document.getElementById（“videoplayback”）.style.opacity=“0.0”；}，1000）；
}
}
}
函数休假（）{
document.getElementById（“选择”）.style.position=“相对”；
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；
log（rand1+'，'+rand2）；
}
位置：相对到body元素
body {
position: relative;
}
如果主体元素为空，则还需要将其拉伸到窗口的高度
html,
body {
height: 100%;
}
您需要将px
附加到坐标：
explo.style.top = cursorY + "px";
explo.style.left = cursorX + "px";
能否提供一个简单的工作示例来说明问题？如果在document.body.onclick
函数中使用console.log（cursorY）
和console.log（cursorX）
，会发生什么？此外，您将使用当前函数泄漏内存。创建你的checkCursor（）
函数，并将其分配给document.body.onclick
而不是将其放入setInterval函数中。我会得到一个常规数字，因为我在浏览器中要求没有NaN否，不幸的是没有（SRY用于错误的语法和拼写xD）谢谢，我知道你必须放入一个单位，但是当我加入这个新的html时，它不再工作了，所以这是我的错，解决这个问题的thx