如何根據鼠標移動/位置應用效果？

我有絕對位置3個按鈕：如何根據鼠標移動/位置應用效果？

.micro { 
position:absolute; 
} 

#micro_1 { 
left:1165px; 
top:176px; 
} 

#micro_2 { 
left:800px; 
top:300px; 
} 

#micro_3 { 
left:300px; 
top:400px; 
}

我想褪色這些3個元素，當鼠標移動和更靠近所述圖像中的一個。如果鼠標靠近圖像1，圖像1漸漸消失。圖像2和圖像3漸漸消失。依此類推。

我可以使用jQuery知道鼠標的位置：

$('body').mousemove(function(e){ 
    $('#mouse_position').html("mouse position: x=" + e.pageX + "; y=" + e.pageY);

所以我想我可以做一些數學應用的效果。

我做了什麼：

$('body').mousemove(function(e){ 
     $('#mouse_position').html("mouse position: x=" + e.pageX + "; y=" + e.pageY); 
     if (e.pageX > 394 && e.pageX < 533) { 
      $('#lueur_video_1').fadeIn('slow'); 
      $('#lueur_video_2').fadeOut('slow'); 
      $('#lueur_video_3').fadeOut('slow'); 
     } 

     if (e.pageX > 533 && e.pageX < 722) { 
      $('#lueur_video_2').fadeIn('slow'); 
      $('#lueur_video_1').fadeOut('slow'); 
      $('#lueur_video_3').fadeOut('slow'); 
     } 

     if (e.pageX > 722 && e.pageX < 1116) { 
      $('#lueur_video_3').fadeIn('slow'); 
      $('#lueur_video_1').fadeOut('slow'); 
      $('#lueur_video_2').fadeOut('slow'); 
     }

來源

2013-01-24 Sébastien Gicquel

你可以創建一個到目前爲止在jsfiddle.net上的工作版本嗎？ –

@Explosion Pills看到這個小提琴：http://jsfiddle.net/Vinyl/2khgw/1/這是非常基本的。 –

您可以比較鼠標位置（e.pageX/e.pageY）到圖像的中心，並設置基礎上的不透明度。您可以使用$("#micro_3").offset()來檢查頁面上的元素的位置。

您需要自行決定淡入淡出的最小距離和最大距離。當它超出最大距離時，不透明度爲0並且在最小值內，不透明度爲1.對於任何之間的任何值，通過(Range - CurrentDistance)/Range計算不透明度。

來源

2013-01-24 01:07:52

感謝您的建議。我正在嘗試你的解決方案，這顯然更加精確。我編輯了我的問題以顯示我所嘗試過的內容（非常基本但效果很好）。 –

@SébastienGicquel你很近，但如果你還想使用'pageY'，你不能只使用'pageX'。一個名叫畢達哥拉斯的偉人創造了一個定理，它根據它們形成的直角計算兩點之間的距離。另外，使用'.css（'opacity'）'。 'fadeIn' /'fadeOut'動畫，因此'mousemove'會以這麼高的頻率觸發，所以它們會持續動畫。如果你想要動畫，請嘗試在不透明度上使用CSS轉換。 –

如何根據鼠標移動/位置應用效果？

回答

相關問題