Question

如何使其他图像也跟随鼠标？不是所有的都在同一时间，而是当我点击所选图像时。

如何计算单击图像时鼠标移动的距离？

请参阅下面的链接。

HTML：

<div id="squarelocation"></div>
<div class="square 1">1</div>
<div class="square 2">2</div>
<div class="square 3">3</div>

Jquery的：

 $(document).ready(function () {
     var i = true;
     $(document).on('click', function () {
         $(this)[i ? 'on' : 'off']('mousemove', follow);
         i = !i;
     });

     function follow(e) {
         var xPos = e.pageX;
         var yPos = e.pageY;

         $("#squarelocation").html("The square is at: " + xPos + ", " + yPos + "pixels");
         $(".2").offset({
             left: e.pageX,
             top: e.pageY
         });

     }
 });

Answer 1

您可以为有效正方形添加“有效”类。我添加了一个例子。活动方块将一直移动，直到您单击以停用它。

http://jsfiddle.net/fG6kr/1/

$(document).ready(function () {
    var i = true;
    $('.square').on('click', function () {
        if( $(this).hasClass("active"))
        {
            $(this).removeClass("active");
            $(document).off('mousemove');
        }
        else
        {
            $(this).addClass("active");
            $(document).on('mousemove', follow);
        }
    });

    function follow(e) {
        var xPos = e.pageX;
        var yPos = e.pageY;

        $("#squarelocation").html("The square is at: " + xPos + ", " + yPos + "pixels");
        $('.active').offset({
            left: e.pageX,
            top: e.pageY
        });

    }
});

Answer 2

我建议你将click事件绑定到方形类，如下所示：

 var clickedImage;
 $('.square').click(function (e){
     initialX = e.pageX;
     initialY = e.pageY;
     clickedImage = this;
 });

并将上下文分配给变量，以便您可以在需要时引用它。然后在您的代码中，请参考该上下文而不是硬编码的“.2”：

 $(clickedImage).offset({
     left: e.pageX,
     top: e.pageY
 });

这样，点击的图像将被引用，而不是一直跟随鼠标的“2”。

计算点击原点与当前位置之间的距离相同，您可以在点击图像时保存原始点：

 var initialX;
 var initialY;
 $('.square').click(function (e){
     initialX = e.pageX;
     initialY = e.pageY;
     clickedImage = this;
 });

并在'跟随'功能中进行计算，当然计算应由您决定，但这是一个例子：

 var distanceX = xPos - initialX;
 var distanceY = yPos - initialY;
 $("#squarelocation").html("The square is at: " + xPos + ", " + yPos + "pixels");
 $('#squaredistance').html("Distance from origin: " + distanceX + ", " + distanceY);

希望这有帮助。 jsfiddle：http://jsfiddle.net/FW9jV/1/

Answer 3

demo

$(function() {

  $('.square').click(function(){
    $(this).toggleClass('sel');
  });

  $(document).on('mousemove', function(e){
    $(".sel").offset({left: e.pageX+10, top: e.pageY+10});
  });

});

在Jquery中遇到mousemove和images的问题

3 个答案: