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

以下代码在所有浏览器中都能完美运行，禁止使用IE浏览器。 照常。 这是需要发生的事情：

1. 将鼠标hover在链接上时，获取该链接颜色。
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); }); 

我期待着你的回音。

Answer 1

没有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]; } 

Answer 2

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