Javascript 为什么'；我的浏览器不能在我的线程中的类和ID之间产生差异吗？_Javascript_Jquery_Html

Javascript 为什么'；我的浏览器不能在我的线程中的类和ID之间产生差异吗？

javascript jquery html

Javascript 为什么'；我的浏览器不能在我的线程中的类和ID之间产生差异吗？,javascript,jquery,html,Javascript,Jquery,Html,这是一个很难问的问题，但我想你会明白为什么： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initia

这是一个很难问的问题，但我想你会明白为什么：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="jquery.min.js"></script>
    <link href="jquery-ui/jquery-ui.css" rel="stylesheet">
    <script src="jquery-ui/external/jquery/jquery.js"></script>
    <script src="jquery-ui/jquery-ui.js"></script>

    <style type="text/css">
        #player {
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: green;
            margin-left: 10px;
            margin-top: 100px;
        }
        .obstacle {
            border-radius: 1em;
            background-color: #663300;
            width: 100px;
            height: 75px;
            margin-left: 30px;
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <div id="player"></div>
    <div class="obstacle"></div>
    <script> 
        $('body').css('cursor', 'none');
        /*$("#player").click(function() {
            var position = $("#circle").offset();
            alert(position);
        });
        $("#player").draggable(); */
        $(document).mousemove(function(event){ 
            var X = event.pageX;
            var Y = event.pageY;
            $("#player").css('margin-top', Y-75);
            $("#player").css('margin-left', X-75);
            //alert(X+" "+Y);
        });


    </script>
</body>
</html>


#玩家{
边界半径：50%；
宽度：150px；
高度：150像素；
背景颜色：绿色；
左边距：10px；
边缘顶部：100px；
}
.障碍{
边界半径：1米；
背景色：#663300；
宽度：100px；
高度：75px；
左边距：30px；
利润上限：200px；
}
$（'body'）.css（'cursor'，'none'）；
/*$（“#播放器”）。单击（函数（）{
变量位置=$（“#圆”）.offset（）；
警戒（位置）；
});
$（“#播放器”）.draggable（）*/
$（文档）.mousemove（函数（事件）{
var X=event.pageX；
var Y=event.pageY；
$（“#player”）.css（'margin-top'，Y-75）；
$（“#player”）.css（'margin-left'，X-75）；
//警报（X+“”+Y）；
});

这段代码应该创建一个id为“player”的div，然后将其放置在光标当前所在的位置。（这很好）但是还有一个“障碍”，出于某种原因，它会随着玩家移动，尽管它不应该移动

为什么会这样？有人能给我解释一下吗

图片：

和css

#player {
    position: absolute;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    background-color: green;
    margin-left: 10px;
    margin-top: 100px;
}

您可以更改影响块大小的边距，因此底部块也会移动。尝试更改顶部和左侧，并将其位置设置为绝对

这样，您就可以将该元素从流中移开-

和css

#player {
    position: absolute;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    background-color: green;
    margin-left: 10px;
    margin-top: 100px;
}

您可以更改影响块大小的边距，因此底部块也会移动。尝试更改顶部和左侧，并将其位置设置为绝对

通过这种方式，您可以将该元素从flow中移开-

因为您希望基于鼠标移动来移动块，所以我认为您可能必须使用不同的位置值，如绝对值

#player {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  background-color: green;
  margin-left: 10px;
  margin-top: 100px;
  position: absolute;
}

$（'body'）.css（'cursor'，'none'）；
/*$（“#播放器”）。单击（函数（）{
变量位置=$（“#圆”）.offset（）；
警戒（位置）；
});
$（“#播放器”）.draggable（）*/
$（文档）.mousemove（函数（事件）{
var X=event.pageX；
var Y=event.pageY；
$（“#player”）.css（'margin-top'，Y-75）；
$（“#player”）.css（'margin-left'，X-75）；
//警报（X+“”+Y）；
});
#播放器{
边界半径：50%；
宽度：150px；
高度：150像素；
背景颜色：绿色；
左边距：10px；
边缘顶部：100px；
位置：绝对位置；
}
.障碍{
边界半径：1米；
背景色：#663300；
宽度：100px；
高度：75px；
左边距：30px；
利润上限：200px；
}
由于要根据鼠标移动来移动块，我认为可能需要使用不同的位置值，如绝对值
#player {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  background-color: green;
  margin-left: 10px;
  margin-top: 100px;
  position: absolute;
}


$（'body'）.css（'cursor'，'none'）；
/*$（“#播放器”）。单击（函数（）{
变量位置=$（“#圆”）.offset（）；
警戒（位置）；
});
$（“#播放器”）.draggable（）*/
$（文档）.mousemove（函数（事件）{
var X=event.pageX；
var Y=event.pageY；
$（“#player”）.css（'margin-top'，Y-75）；
$（“#player”）.css（'margin-left'，X-75）；
//警报（X+“”+Y）；
});
#播放器{
边界半径：50%；
宽度：150px；
高度：150像素；
背景颜色：绿色；
左边距：10px；
边缘顶部：100px；
位置：绝对位置；
}
.障碍{
边界半径：1米；
背景色：#663300；
宽度：100px；
高度：75px；
左边距：30px；
利润上限：200px；
}
您只需更改css即可
#player {
        border-radius: 50%;
        width: 150px;
        height: 150px;
        background-color: green;
        margin-left: 10px;
        margin-top: 100px;
        position: absolute;
    }

这是你的电话号码。签出：）
您只需更改css即可
#player {
        border-radius: 50%;
        width: 150px;
        height: 150px;
        background-color: green;
        margin-left: 10px;
        margin-top: 100px;
        position: absolute;
    }

这是你的电话号码。检查：）
这可能是CSS问题，而不是JS。。您是否尝试在障碍物上应用位置：固定/绝对？您更改了边距
s，这会影响块大小，因此底部块也会移动。尝试更改顶部
和左侧
，并将其位置
设置为绝对
尝试过，但未修复。。。这可能是css的问题？听起来很有趣。@llamerr谢谢，就是这样：），我甚至没想过……这“可能”是CSS问题，而不是JS。。您是否尝试在障碍物上应用位置：固定/绝对？您更改了边距
s，这会影响块大小，因此底部块也会移动。尝试更改顶部
和左侧
，并将其位置
设置为绝对
尝试过，但未修复。。。这可能是css的问题？听起来很有趣。@llamerr谢谢，就是这样：），我甚至没想到。。。