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

您错误地绑定了.on() mousemove

//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>

Answer 2

使用这种方法：

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

并添加jQuery库

演示：https://jsfiddle.net/w4b8ykqu/5/

绑定事件的格式：

.on( events [, selector ] [, data ], handler )

和bind不是事件或选择器。

参考： http://api.jquery.com/on/#on-events-selector-data-handler

Answer 3

使用

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

删除绑定

mousemove documentation

WORKING DEMO

Answer 4

以下是相同的工作演示：

HTML：

<div class="row">
    <div class="col-md-12 spacc">
        <div class="circle2"></div>
    </div>
</div>

CSS：

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

JS：

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

https://jsfiddle.net/SYwba/736/

Answer 5

 $(document).ready(function () {

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

});

Jquery div用鼠标移动

5 个答案: