マウスの移動やページの読み込み時に背景色を変更する

Question

ユーザーがマウスを動かすと、本体の背景色を変更するサンプルコードが見つかりましたが、初めてページが白です。マウスを動かすまで、変更を見ることはできません。

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

JSFiddle：http://jsfiddle.net/WV8jX/

私は負荷にトリガすることができますどのように？

Answer 1

jqueryの$(document).ready()関数を使用できます。この関数は、コンテンツが読み込まれたときに呼び出され、ランダムな背景色（または任意の色）を初期設定します。

fiddleが更新されました。

Answer 2

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

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

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

$win.resize(getWidth).mousemove(colorize).resize(); 
colorize({pageX:0,pageY:0}); 

Answer 3

あなたは、このようなアプローチを使用することができます。

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

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

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

$win.resize(getWidth).mousemove(function(e) { 
    changeColor(e); 
}).resize(); 

$(document).ready(function() { 
    var is_loaded = false; 
    $(document.documentElement).bind("mouseover", function(e) { 
    if (!is_loaded) { 
     is_loaded = true; 
     changeColor(e); 
    } 
    }); 
}); 

Answer 4

実施例：

$(document).ready(function() { 
 
    getRandomColor(); 
 
    RandomMouseMoveColor(); 
 
}); 
 

 
function getRandomColor() { 
 
document.body.style.background = "#"+((1<<24)*Math.random()|0).toString(16); 
 
} 
 

 
function RandomMouseMoveColor() { 
 
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(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>