2010-10-02 5 views
4

J'utilise cette Math pour une animation couleur bg sur le vol stationnaire:jQuery Math pour l'animation Couleur - Gamme de couleurs certaine

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

Il produit une couleur rgb aléatoire. Très bien en effet mais je cherche quelque chose de différent.

Est-ce que quelqu'un connaît un bon Math que je peux utiliser pour avoir cette couleur aléatoire seulement dans une certaine gamme de couleurs, comme hors de la gamme de couleur rouge ou sur les verts?

Toute aide est appréciée.

@Avinash, voici mon code complet car je l'utilise maintenant. Comment puis-je inclure votre solution?

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



Il doesnt travail. Je ferais mieux de le laisser tel quel. Merci à vous tous pour votre aide.

+0

Comment utiliser HSL puis convertir en RVB? http://en.wikipedia.org/wiki/HSL_and_HSV (edit: css3 supporte HSL) – livibetter

Répondre

6

Pour générer un nombre aléatoire dans une gamme, nous devons faire quelque chose comme

minValue + random Number * (maxValue - minValue) 

-à-dire, si vous voulez créer un nombre aléatoire entre la plage de à , nous devrait faire

var rand = 100 + Math.floor(Math.random() * (200 - 100)); 

qui donne un nombre aléatoire entre la plage de 100 à 200

à l'aide de cette règle de base, nous pouvons générer une couleur au hasard à partir d'une plage donnée

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

Essayez ce code http://jsbin.com/tuday

EDIT:

$(function() { 
    var cache = $('#hover').css('background-color'); 
    $('#hover').hover(function() { 
     $(this).css({'background-color' : rgb() }); 
    },function() { 
     $(this).css({'background-color' : cache }); 
    }); 
}); 

Exemple: http://jsbin.com/iwovew

+0

Salut, cela a du sens pour moi, d'une certaine manière, mais je ne suis pas très bon avec javascript et maintenant je ne peux pas comprendre comment placer cela dans mon script existant sans détruire le reste de celui-ci.Je voudrais coller le script que j'ai ici mais il ne s'affichera pas bien, j'en ai peur. Alors comment allez-vous coller dans ces extraits de script? Prêt à révéler ce truc? – markimark

+0

@hardy qu'est-ce que c'est? –

+0

@Avinash qui était juste une erreur emty parce que j'ai réalisé que je ne peux pas simplement coller des extraits dans le champ de texte. – markimark

3

Génère une couleur au hasard sur la plage noire à rouge:

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

En fait, cet extrait m'a beaucoup aidé à comprendre le tout. Je joue un peu avec ça. Merci pour votre temps. – markimark

1

Vous devriez la recherche sur la conversion de valeurs et de RGB à HSB (parfois appelé HSI). L'arithmétique sur ce modèle de couleur a beaucoup de sens. Par exemple. Pour jouer avec les nuances de rouge, vous pouvez commencer avec les valeurs HSB (0, 100, 100) pour le rouge "pur". Changer S = 50% vous donne une nuance "plus grise" de rouge. Changer B = 50% vous donne une nuance de rouge "plus sombre".