バックグラウンドの色をマウスの動きに合わせて変更してください

Question

マウスのある場所に応じて、画面の背景色を変更するための簡単なコードがHTMLにあります。色は他のものに色あせして、途切れることはありません。ただスムーズに移行。 ありがとう

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

あなたがMouseMoveイベントに耳を傾け、位置やウィンドウサイズに基づいて、いくつかの論理演算を行うことができます。私はその後、

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値を格納配列で、：どのようにそのロジックがあるべきあなた次第ですが、私は（jQueryのを使用して）あなたのための簡単な例を作りましたマウスの位置がどこにあるかに基づいて値を変更するだけです。

デモ：http://jsfiddle.net/WV8jX/