Verwenden Sie die HTML5-Technologie, um Ihre eigenen coolen Farbauswahl-Tutorialfähigkeiten zu entwickeln

Sie haben vielleicht viele Farbwähler gesehen, die mit jquery/js entwickelt wurden. Heute werden wir die HTML5-Technologie verwenden, um selbst einen besseren Farbwähler zu implementieren. Ich hoffe, es gefällt euch allen!

Code kopieren Der Code lautet wie folgt: "> R " id= "bVal" /> RGB HEX ;/div&gt ;

Der Code ist sehr einfach und besteht aus zwei Teilen, einem Klickelement und einem Element zur Anzeige der Farbauswahl.

JavaScript-Code

Code kopieren

Der Code lautet wie folgt: $(function(){ var bCanPreview = true; // kann eine Vorschau anzeigen // Canvas- und Kontextobjekte erstellen var canvas = document.getElementById('picker') ; var ctx = canvas.getContext('2d'); / aktives Bild zeichnen var image = new Image(); ctx .drawImage( image, 0, 0, image.width, image.height); // das Bild auf die Leinwand zeichnen } // gewünschtes Farbrad auswählen var imagesrc="images/colorwheel1.png "; switch ($(canvas).attr('var')) { case '2': imagesrc="images/colorwheel2.png"; break; case '3': imagesrc="images/colorwheel3.png"; case '4': imagesrc="images/colorwheel4.png"; >case ' 5': imagesrc="images/colorwheel5.png"; break; } image.src = imageSrc; function(e) { // Mausbewegungshandler if (bCanPreview) { // Koordinaten der aktuellen Position abrufen var canvasOffset = $(canvas).offset( var canvasX = Math .floor( e.pageX - canvasOffset.left); var canvasY = Math.floor(e.pageY - canvasOffset.top); , canvasY, 1, 1); var pixel = imageData.data // Vorschaufarbe aktualisieren var pixelColor = "rgb(" pixel[0] ", " pixel[1] ", pixel[2 ] ")"; $('.preview').css('backgroundColor', pixelColor); 0]) ; $('#gVal').val(pixel[1]); $('#bVal').val(pixel[2]); '). val(pixel[0] ',' pixel[1] ',' pixel[2]); >$( '#hexVal').val('#' ('0000' dColor.toString(16)).substr(-6)); $('# picker') .click(function(e) { // Click-Event-Handler bCanPreview = !bCanPreview; } $('.preview').click(function(e) { // Vorschauklick $('.colorpicker').fadeToggle("slow", "linear"); bCanPreview = true;

Jeder Wie Sie sehen können, handelt es sich um einen sehr kurzen JS-Code, der zum Erstellen einer neuen Leinwand und eines neuen Objekts verwendet wird. Anschließend zeichnen wir eine kreisförmige Farbplatte. Sie können verschiedene Grundplattenfarben wählen. Hier wird ein Parameter verwendet, um verschiedene Optionen festzulegen. Wie folgt:

Code kopieren

Der Code lautet wie folgt:

="html" name="code"> Jetzt fügen wir Ereignisse hinzu: Mausbewegungs- und Klickereignisse. jQuery wird hier verwendet, um den Selektor anzuzeigen und auszublenden.

Code kopieren Der Code lautet wie folgt: $('.preview' ).click (function(e) { // Vorschau klicken $('.colorpicker').fadeToggle("slow", "linear"); bCanPreview = true; }); Wenn unser Mausbewegungen Auf dem ausgewählten Objekt müssen wir die Informationen aktualisieren

Kopieren Sie den Code Der Code lautet wie folgt: $('#picker').mousemove(function(e) { // Mausbewegungshandler if (bCanPreview) { // Koordinaten abrufen der aktuellen Position var canvasOffset = $ (canvas).offset(); var canvasX = Math.floor(e.pageX - canvasOffset.left); - canvasOffset.top); / / aktuelles Pixel abrufen var imageData = ctx.getImageData(canvasX, canvasY, 1, 1); var pixel = imageData.data; color var pixelColor = "rgb( " pixel[0] ", " pixel[1] ", " pixel[2] ")" $('.preview').css('backgroundColor', pixelColor); // Steuerelemente aktualisieren $('#rVal').val(pixel[0]); >$('#bVal').val (pixel[2]); $('#rgbVal').val(pixel[0] ',' pixel[1] ',' pixel[2]); var dColor = pixel[2] 256 * pixel[1] 65536 * pixel[0]; $('#hexVal').val('#' ('0000' dColor.toString(16)) .substr(-6)); } }); $('#picker').click(function(e) { // click event handler bCanPreview = !bCanPreview; });

CSS-Code CSS für verschiedene Farbgrundplatten:

Code kopieren Der Code lautet wie folgt: /* Farbauswahlstile */ .colorpicker { Hintergrundfarbe: #222222 ; Randradius: 5px 5px 5px; Farbe: #FFFFFF; Position: absolut; Breite: 460px } Cursor: Fadenkreuz; Rand: 0; } 🎜>.controls { float: right; margin: 10px } .controls > div { border: 1px solid #2F2F2F; ; Überlauf: versteckt; .controls label { float: left; .controls > Hintergrundfarbe: #121212; Rahmen: #2F2F2F;Float: rechts; Höhe: 14px; >margin-left: 6px; text-align: centre; width: 75px; background: url(" ../images/select.png") wiederholen Scroll-Mitte Mitte transparent; border-radius: 3px; box-shadow: 2px 2px 2px #444444; Cursor: Zeiger; height: 30px; Breite: 30px }

Ich hoffe, es gefällt euch allen