JQuery Math для цветовой анимации - определенный цветовой диапазон

Question

Я использую эту математику для анимации цвета bg при наведении курсора:

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

Она производит случайный цвет rgb.Очень хорошо, но я ищу что-то другое.

Кто-нибудь знает хорошую математику, которую я могу использовать, чтобы получить этот случайный цвет только из определенного цветового диапазона, например, из красного цветового диапазона или изgreens?

Любая помощь приветствуется.

@ 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

Генерирует случайный цвет из диапазона от черного к красному:

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

Answer 3

Вам следует изучить вопрос о преобразовании значений из RGB в HSB (иногда называемый HSI).Арифметика на этой цветовой модели имеет очень большой смысл.Например, чтобы играть с оттенками красного, вы можете начать со значения HSB (0, 100, 100) для «чистого» красного.Изменение S = 50% дает вам «более серый» оттенок красного.Изменение B = 50% дает более темный оттенок красного.