根據鼠標移動更改backgorund顏色

Question

Html中是否有簡單代碼，javascript根據鼠標的位置更改屏幕的完整背景顏色。顏色應該褪色到另一個，沒有硬的中斷。只是一個smoove過渡。 謝謝

Answer 1

您可以在每個元素上設置事件onmouseover。例如，您可以設置一個名爲​​的函數。在每個元素中，您設置了一個代碼來知道要設置哪種顏色。

例如，你可以有以下幾種：

<div name="myBackgroundDiv"> 
    <div onmouseover="changeBackground(1)"/> 
    <div onmouseover="changeBackground(2)"/> 
    <div onmouseover="changeBackground(3)"/> 
</div> 

和changeBackground功能，您可以指定改變「myBackgroundDiv」根據傳遞的數量的背景色。您可以查看this和this。

最好的問候，

Answer 2

您可以收聽到鼠標移動事件，並以此爲基礎進行位置和窗口大小一些邏輯計算。那怎麼邏輯應該是你的，但我爲你一個簡單的例子（使用jQuery）：

var $win = $(window), 
    w = 0,h = 0, 
    rgb = [], 
    getWidth = function() { 
     w = $win.width(); 
     h = $win.height(); 
    }; 

$win.resize(getWidth).mousemove(function(e) { 

    rgb = [ 
     Math.round(e.pageX/w * 255), 
     Math.round(e.pageY/h * 255), 
     150 
    ]; 

    $(document.body).css('background','rgb('+rgb.join(',')+')'); 

}).resize(); 

的rgb陣列是我存儲應該使用的RGB值的陣列，然後我只需根據鼠標位置的位置更改值。

演示：http://jsfiddle.net/WV8jX/