[英]Change background color on mouse move and page load as well
我找到了一个示例代码,当用户移动鼠标时,它会更改主体的背景颜色,但是页面第一次是白色的。 您必须先移动鼠标,才能看到更改。
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/
如何在加载时触发?
工作示例:
$(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>
您可以使用jquery的$(document).ready()
函数,该函数在加载内容时会被调用以初始设置随机的背景色(或所需的任何颜色)。
我更新了你的小提琴 。
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});
您可以使用以下方法:
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);
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.