颜色动画的 jQuery 数学 - 某些颜色范围

Question

我将这个数学用于悬停时的背景颜色动画：

var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';

它会产生随机的 rgb 颜色。确实很好，但我在寻找不同的东西。

有没有人知道一个很好的数学，我可以用它来让随机颜色只在某个颜色范围之外，比如在红色范围之外或在绿色之外？

感谢您的帮助。

@Avinash，这是我现在使用的完整代码。如何包含您的解决方案？

$(document).ready(function () {
    //bg color animation
    original = $('.item,.main-menu-button').css('background-color');
    $('.item,.main-menu-button').hover(function () { //mouseover
        var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; //random hover color
        $(this).stop().animate({
            'backgroundColor': col
        }, 1000);
    }, function () { //mouseout
        $(this).stop().animate({
            'backgroundColor': '#111'
        }, 500); //original color as in css
    });
});

它不起作用。我最好保持原样。感谢大家的帮助。

Answer 1

要生成一个范围内的随机数，我们需要做一些类似的事情

minValue + random Number * (maxValue - minValue)

也就是说，如果你想创建一个介于 100 到 200 之间的随机数，我们应该这样做

var rand = 100 + Math.floor(Math.random() * (200 - 100));

给出一个介于 100 到 200 之间的随机数

使用这个基本规则，我们可以从给定范围内生成随机颜色

var range = [{0 : 150,1 : 200}, {0 : 200,1 : 230},{0 : 10,1 : 20}];
function rgb() {
  var color  ='rgb(';
  for(var i = 0; i< 3; i++) {
    color += rand(range[i]['0'], range[i]['1']) + ',';
  }
  return color.replace(/\,$/,')')
}

function rand(min, max) {
    return min + Math.floor(Math.random() * (max - min));
}

alert(rgb());

试试这个代码http://jsbin.com/tuday

编辑：

$(function() {
    var cache = $('#hover').css('background-color');
    $('#hover').hover(function() {
        $(this).css({'background-color' : rgb() });
    },function() {
        $(this).css({'background-color' : cache });
    });
});

示例：http://jsbin.com/iwovew

Answer 2

您应该研究如何将值与 RGB 转换为 HSB（有时称为 HSI）。这种颜色模型的算术非常有意义。例如。要使用红色阴影，您可以从“纯”红色的 HSB 值（0、100、100）开始。更改 S=50% 为您提供“更灰”的红色阴影。将 B=50% 更改为“更深”的红色阴影。

Answer 3

生成黑色到红色范围之外的随机颜色：

var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',0,0)';