Jquery div 用鼠标移动

Question

我有一小部分 Jquery 正在尝试开始工作。

$(document).on('bind', 'mousemove', function(e){
    e.preventDefault();
    $('.circle2').css({
       left:  e.pageX + 20,
       top:   e.pageY
    });
});

基本上，圆圈应该跟随您的鼠标位置。然而，我似乎缺少一些东西。

这是圆圈的 CSS:

.circle2{
  position: absolute;
  float: left;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 90px;
}

https://jsfiddle.net/w4b8ykqu/

Answer 1

您已绑定(bind).on() 鼠标移动错误

//remove "bind"
$(document).on('mousemove', function(e) {
    e.preventDefault();
    $('.circle2').css({
        left: e.pageX + 20,
        top: e.pageY
    });
});

运行代码片段

//remove "bind"
$(document).on('mousemove', function(e) {
    e.preventDefault();
    $('.circle2').css({
        left: e.pageX + 20,
        top: e.pageY
    });
});

.circle2 {
    position: absolute;
    float: left;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 90px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col-md-12 spacc">
        <div class="circle2"></div>
    </div>
</div>