jQuery:HEX到RGB计算浏览器之间有什么不同?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery:HEX到RGB计算浏览器之间有什么不同?相关的知识,希望对你有一定的参考价值。

下面的代码可以在所有浏览器中完美运行,禁止IE浏览器。照常。这是需要发生的事情:

  1. 将鼠标悬停在链接上时,获取该链接颜色。
  2. 获取该颜色的RGB值,因为基本CSS将始终设置为HEX值;
  3. 使用新的RGB值并进行计算以确定该颜色的较浅色调
  4. 在0.5秒的时间内为新的较浅色调制作动画
  5. 将鼠标移开时,将颜色恢复为原始值

正如我所说,到目前为止代码工作得非常好,除了在IE中。任何有新鲜眼睛(和完整的发际线)的人都可以看看这个吗?可以做到与众不同吗?

function getRGB(color) {
    // Function used to determine the RGB colour value that was passed as HEX
    var result;

    // Look for rgb(num,num,num)
    if (result = /rgb(s*([0-9]{1,3})s*,s*([0-9]{1,3})s*,s*([0-9]{1,3})s*)/.exec(color)) return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];

    // Look for rgb(num%,num%,num%)
    if (result = /rgb(s*([0-9]+(?:.[0-9]+)?)\%s*,s*([0-9]+(?:.[0-9]+)?)\%s*,s*([0-9]+(?:.[0-9]+)?)\%s*)/.exec(color)) return [parseFloat(result[1]) * 2.55, parseFloat(result[2]) * 2.55, parseFloat(result[3]) * 2.55];

    // Look for #a0b1c2
    if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color)) return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];

    // Look for #fff
    if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color)) return [parseInt(result[1] + result[1], 16), parseInt(result[2] + result[2], 16), parseInt(result[3] + result[3], 16)];
}


var $oldColour;
// Get all the links I want to target
$('a').not('aside.meta a.notes_link, aside.meta ul li a, section.social_media a, footer a').hover(function() {
    //code when hover over
    //set the old colour as a variable so we can animate to that value when hovering away
    $oldColour = $(this).css('color');

    //run the getRGB function to get RGB value of the link we're hovering over
    var rgb = getRGB($(this).css('color'));

    for (var i = 0; i < rgb.length; i++)
        //for each of the 3 HEX values, determine if the value + an increment of 30 (for a lighter colour) is lighter than the max (255)
        //if it is, use the HEX value plus the increment, else use the max value
        rgb[i] = Math.min(rgb[i] + 30, 255);

        //join the new three new hex pairs together to form a sinle RGB statement
        var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';

    //animate the text link color to the new color.
    $(this).animate({'color': newColor}, 500);

}, function() {
    //code when hovering away
    //animate the colour back using the old colour determined above
    $(this).animate({'color': $oldColour}, 500);
});

我期待着你的回音。

答案

没有IE来测试它,但如果问题只是第一次显示,请尝试使用setTimeout,超时很短(大约10ms),以便第二次调用您的代码。

此外,可能值得找出代码的哪些部分不起作用 - 我想$oldColour = $(this).css('color');,但添加一些console.log并找出,它可能会有所帮助,你甚至可能会发现其他事情正在发生,你看不到马上。

编辑:像这样的东西:

$oldColour = $(this).css('color');
var rgb;
if($oldColour.substring(0, 3) == 'rgb') {
   rgb = getRGB($oldColour);
} else { // it's a hex
   rgb = getFromHex($oldColour);
}

其中getFromHex可以像http://www.richieyan.com/blog/article.php?artID=32那样,修改为按预期工作:

function hex2rgb(hexStr){
    // note: hexStr should be #rrggbb
    var hex = parseInt(hexStr.substring(1), 16);
    var r = (hex & 0xff0000) >> 16;
    var g = (hex & 0x00ff00) >> 8;
    var b = hex & 0x0000ff;
    return [r, g, b];
}
另一答案

有了icyrock的帮助,这就是最终代码的样子:

function getRGB(color) {
    var result;

    // Look for rgb(num,num,num)
    if (result = /rgb(s*([0-9]{1,3})s*,s*([0-9]{1,3})s*,s*([0-9]{1,3})s*)/.exec(color)) return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];

    // Look for rgb(num%,num%,num%)
    if (result = /rgb(s*([0-9]+(?:.[0-9]+)?)\%s*,s*([0-9]+(?:.[0-9]+)?)\%s*,s*([0-9]+(?:.[0-9]+)?)\%s*)/.exec(color)) return [parseFloat(result[1]) * 2.55, parseFloat(result[2]) * 2.55, parseFloat(result[3]) * 2.55];

    // Look for #a0b1c2
    if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color)) return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];

    // Look for #fff
    if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color)) return [parseInt(result[1] + result[1], 16), parseInt(result[2] + result[2], 16), parseInt(result[3] + result[3], 16)];
}


var $oldColour;

$('a').not('aside.meta a.notes_link, aside.meta ul li a, section.social_media a, footer a').hover(function() {
    //code when hover over
    $(this).stop(true, true);
    $oldColour = $(this).css('color');

    var rgb;

    function hex2rgb(hexStr){
        // note: hexStr should be #rrggbb
        var hex = parseInt(hexStr.substring(1), 16);
        var r = (hex & 0xff0000) >> 16;
        var g = (hex & 0x00ff00) >> 8;
        var b = hex & 0x0000ff;
        return [r, g, b];
    }


    if($oldColour.substring(0, 3) == 'rgb') {
       rgb = getRGB($oldColour);
    } else { // it's a hex
       rgb = hex2rgb($oldColour);
    }

    for (var i = 0; i < rgb.length; i++)
        rgb[i] = Math.min(rgb[i] + 30, 255);
        var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';

    $(this).animate({'color': newColor}, 500);

}, function() {
    //code when hovering away
    $(this).stop(true, true);
    $(this).animate({'color': $oldColour}, 500);
});

以上是关于jQuery:HEX到RGB计算浏览器之间有什么不同?的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 如何获取十六进制的color值

将 Hsl 转换为 rgb 和 hex

RGB 到 HEX 转换 JavaScript [重复]

为啥我的 JavaScript RGB Hex 转换器不起作用?

在google和火狐赌暌姑jquery获取颜色为rgb,怎么转换成为#CCDDFF这种颜色呢

ActionScript 3 AS3 - RGB到Hex的RGB类