Comment obtenir la valeur de couleur de dégradé en pourcentage avec le javascript?

J'ai un fixe la largeur de div avec un dégradé appliqué à l'aide de css. Je veux construire curseur en fonction sélecteur de couleurs basé sur le gradient.

Lorsque je fais glisser le curseur j'ai calculer le pourcentage de la position, et je veux obtenir de l'hexagone ou de couleur rvb code sur la base de cette valeur.

Mon idée était de créer un tableau avec le start/stop positions et les couleurs sont définies, puis de trouver les deux valeurs de ce tableau basé sur la position du curseur, puis en quelque sorte trouver la couleur entre: c'est là que je ne peux pas aller de l'avant.

Démo: http://jsfiddle.net/pdu8rpfv/

var gradient = [
    [
        0,
        'ff0000'
    ],
    [
        28,
        '008000'
    ],
    [
        72,
        '0000ff'
    ],
    [
        100,
        'ff0000'
    ]
];
$( "#slider" ).slider({
    min: 1,
    slide: function( event, ui ) {

        var colorRange = []
        $.each(gradient, function( index, value ) {
            if(ui.value<=value[0]) {
                colorRange = [index-1,index]
                return false;
            }
        });

        $('#result').css("background-color", 'red');

    }
});
InformationsquelleAutor passatgt | 2015-05-09
  1. 36

    J'ai été en mesure de résoudre ce problème à l'aide de cette fonction, qui est basée sur la less.js fonction: http://lesscss.org/functions/#color-operations-mix

    function pickHex(color1, color2, weight) {
    var w1 = weight;
    var w2 = 1 - w1;
    var rgb = [Math.round(color1[0] * w1 + color2[0] * w2),
        Math.round(color1[1] * w1 + color2[1] * w2),
        Math.round(color1[2] * w1 + color2[2] * w2)];
    return rgb;
}

    J'ai simplement besoin de passer les deux le plus proche des codes de couleur à partir du gradient de tableau et le ratio d'où la poignée du curseur est situé(qui peut être facilement calculé à l'aide du curseur de largeur). Voici le live exemple:

    http://jsfiddle.net/vksn3yLL/

    • quel est le point de w/1
    • Cela mérite plus de votes! Merci pour le à portée de main morceau de code!!
    • pouvez vous s'il vous plaît faire la même chose à l'aide de javascript mousemove fonctionnalité..? (Sans Jquery) parce que je travaille en javascript et je ne peux pas en mesure d'ajouter jquery curseur.
    • C'est génial. Exactement ce que je cherchais, même si je dois le traduire en Java.
    InformationsquelleAutor passatgt
  2. 1

    peut-être hors sujet, mais je trouve qu'il pourrait aider ceux à venir ici parce qu'ils veulent une relation entre une couleur et un pourcentage en jquery .css()

    Cet exemple faire un certain nombre de pourcentage apparaissent rouge au vert selon si c'est le plus proche de zéro ou 100:

    $('#elm').css({color: 'rgb(' + ((100 - percent) *2.56) +',' + (percent *2.56) +',0)'})

    Veuillez voir démonstration ci-dessous:

    JS:

    $('button').click( e => {
  const percent = Math.floor(Math.random()*100);
  const newElm = $(`<b>${percent}</b><br>`)
  .css({color: `rgb(${(100 - percent) *2.56},${percent *2.56},0)`})
  $('body').append(newElm);
})

    HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click to make new percentage</button><br>

    InformationsquelleAutor 538ROMEO