jQuery颜色动画的数学计算 - 特定颜色范围

Question

jQuery颜色动画的数学计算 - 特定颜色范围

4

我正在使用这个数学公式来实现鼠标悬停时的背景色动画：

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

它不起作用。我最好将其保留为原样。感谢你们的帮助。

- markimark

使用HSL然后转换为RGB怎么样？http://en.wikipedia.org/wiki/HSL_and_HSV（编辑：CSS3支持HSL） - livibetter

3个回答

3

生成一个在黑色到红色范围内的随机颜色：

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

- cherouvim

实际上，那段代码片段让我更好地理解了整个事情。我正在对它进行一些小的尝试。谢谢你的时间。 - markimark

1

你应该研究如何将值从RGB转换为HSB（有时也称为HSI），在这种颜色模型上进行算术运算非常有意义。例如，要玩弄红色的不同阴影，您可以从HSB值（0、100、100）开始，这表示“纯”红色。将S设置为50％可以给您带来“灰色”的红色阴影。将B设置为50％可使红色变得更暗。

- Salman A

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user372551 · Accepted Answer

要在一定范围内生成随机数，我们需要进行以下操作：

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

Example : http://jsbin.com/iwovew