在jquery中遇到鼠標移動和圖像問題

如何讓其他圖像也能跟隨鼠標？並非所有在同一時間，但當我點擊所選圖像。在jquery中遇到鼠標移動和圖像問題

如何計算鼠標在點擊圖像時移動的距離？

請參閱下面的鏈接。

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 
     }); 

    } 
});

來源

2013-11-26 Sure1thing

的jsfiddle請 –

我建議你點擊事件綁定到廣場類是這樣的：

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

和上下文分配給一個變量，讓你可以參考它時你需要。然後在你的代碼，是指這方面，而不是硬編碼」 2.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/

來源

2013-11-26 23:39:52 Edward

感謝您的詳細解釋。我會嘗試一下並詳細回顧您的所有評論。再次感謝！ – Sure1thing

您可以添加一個 '積極的' 類活動廣場。我添加了一個例子。活動方塊將始終移動，直到您單擊以禁用它。

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 
     }); 

    } 
});

來源

2013-11-26 23:27:28 dcryan22

謝謝你。我也玩了一下。 – Sure1thing

在CSS中定義了類「活動」嗎？我不確定那部分。謝謝 – Sure1thing

您不使用「活動」類作爲樣式。你用它作爲jQuery的標誌來決定使用哪一個。 – dcryan22

demo

$(function() { 

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

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

});

來源

2013-11-26 23:43:20

在jquery中遇到鼠標移動和圖像問題

回答

相關問題