jQuery:HEX到RGB计算在浏览器中有什么不同?
以下代码片段在所有浏览器中都能很好地工作,IE浏览器。 照常。 这是需要发生的事情:
正如我所说的,到目前为止,代码工作得很好,除了在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);
});
我期待听到你的Guru的。
没有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];
}
有了冰雹的帮助,这就是最终代码的样子:
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);
});
链接地址: http://www.djcxy.com/p/87787.html
上一篇: jQuery: HEX to RGB calculation different between browsers?
下一篇: child and :last