このサイトのメディアボックスにランダムなカラーオーバーレイがあります。
http://www.reportageborsen.se/reportageborsen/wordpress/
私はここstackoverflowで仲間から本当に良い助けを得て、このスクリプトを作成しました:
var getRandomInRange = function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
$('.media-box').each(function() {
var mediaBox = $(this);
var mask = mediaBox.find('.mask');
var hue = 'rgb(' + getRandomInRange(100, 255) + ',' + getRandomInRange(100, 255) + ',' + getRandomInRange(100, 255) + ')';
mask.css({
backgroundColor : hue,
opacity : 0.7
});
mediaBox.hover(function() {
mask.stop(true, true).fadeIn();
}, function() {
mask.stop(true, true).fadeOut();
});
});
フィドルリンク: http: //jsfiddle.net/b5ZPq/3/
ただし、明るい色を増やし、灰色がかった色を減らしたいと思います。RGB値の代わりにHSL値で実行できることを理解しています。
そこで、cssの背景のrgb値をhsl値に変換し、スクリプトも変換しようとしましたが、機能しませんでした。
var getRandomInRange = function(min, max) {
return Math.floor(Math.random() * (max - min + 1), 10) + min;
};
$('.media-box').each(function() {
var mediaBox = $(this);
var mask = mediaBox.find('.mask');
var hue = 'hsl(' + getRandomInRange(0, 360) + ',' + getRandomInRange(70, 100) + '%' + getRandomInRange(45, 55) + '%)';
mask.css({
backgroundColor: hue,
opacity: 0.7
});
mediaBox.hover(function() {
mask.stop(true, true).fadeIn();
}, function() {
mask.stop(true, true).fadeOut();
});
});
http://jsfiddle.net/zolana/Kc9U4/5/ (フィドル、更新、動作中:http: //jsfiddle.net/zolana/Kc9U4/9/ )
(私は、この特定のタスクのための堅実なスクリプトを用意するのではなく、すべてのRGB値をHSL値に変換するスクリプトを探していません(その目的のスクリプトがあることは知っています)。)