Gunakan teknologi HTML5 untuk membangunkan kemahiran tutorial color picker_html5 anda sendiri

Anda mungkin telah melihat banyak pemilih warna yang dibangunkan menggunakan jquery/js Hari ini kami akan menggunakan teknologi HTML5 untuk melaksanakan pemilih warna yang lebih baik sendiri. Harap anda semua menyukainya!

Salin kod

Kod tersebut adalah seperti berikut:

R

B " id= "bVal" />

RGB

HEX

;/div> ;


Kod ini sangat mudah dan mengandungi dua bahagian, elemen klik dan elemen yang digunakan untuk memaparkan pemilih warna.

Kod JavaScript

Salin kodKod tersebut adalah seperti berikut:

$(function(){

var bCanPreview = true; // boleh pratonton
// buat kanvas dan objek konteks
var canvas = document.getElementById('picker') ;
var ctx = canvas.getContext('2d'); .drawImage( imej, 0, 0, image.width, image.height); // lukis imej pada kanvas
}
// pilih colorwheel yang diingini
var imagesrc="images/colorwheel1.png ";
switch ($(canvas).attr('var')) {
case '2':
imagesrc="images/colorwheel2.png";
break;
case '3' :
imagesrc="images/colorwheel3.png";
pecah; >kes ' 5':
imagesrc="images/colorwheel5.png";
break;
}
image.src = imageSrc; function(e ) { // pengendali pergerakan tetikus
if (bCanPreview) {
// dapatkan koordinat kedudukan semasa
var canvasOffset = $(canvas).offset(); .floor( e.pageX - canvasOffset.left);
var canvasY = Math.floor(e.pageY - canvasOffset.top); , canvasY, 1, 1);
var pixel = imageData.data;
// kemas kini warna pratonton
var pixelColor = "rgb(" pixel[0] ", " pixel[1] ", " piksel[2 ] ")";
$('.preview').css('backgroundColor', pixelColor
// kawalan kemas kini
$('#rVal').val(pixel[); 0]) ;
$('#gVal').val(piksel[1]); '). val(piksel[0] ',' piksel[1] ',' piksel[2]); >$( '#hexVal').val('#' ('0000' dColor.toString(16)).substr(-6)); pemilih') .klik(fungsi(e) { // klik pengendali acara
bCanPreview = !bCanPreview;
}); pratonton klik
$('.colorpicker').fadeToggle("perlahan", "linear"); 🎜>Semua Orang Seperti yang anda lihat, ini adalah kod js yang sangat pendek yang digunakan untuk mencipta kanvas dan objek baharu, dan kemudian kami melukis plat warna bulat. Anda boleh memilih plat asas warna yang berbeza. Parameter digunakan di sini untuk menetapkan pilihan yang berbeza. Seperti berikut:





Salin kod


Kod adalah seperti berikut:




="html" name="code">
Kini kami menambah acara: mousemove, click events. jQuery digunakan di sini untuk memaparkan dan menyembunyikan pemilih.

Salin kod

Kod tersebut adalah seperti berikut:

$('.preview' ).klik (fungsi(e) { // pratonton klik $('.colorpicker').fadeToggle("lambat", "linear"); bCanPreview = true; }); tetikus bergerak Pada objek yang dipilih, kita perlu memuat semula maklumat Contohnya, warna semasa

Salin kod

Kodnya adalah seperti berikut:

$('#picker').mousemove(function(e) { // pengendali pergerakan tetikus

jika (bCanPreview) {

// dapatkan koordinat kedudukan semasa
var canvasOffset = $ (canvas).offset();
var canvasX = Math.floor(e.pageX - canvasOffset.left); - canvasOffset.top);
/ / dapatkan piksel semasa
var imageData = ctx.getImageData(canvasX, canvasY, 1, 1); warna
var pixelColor = "rgb( " pixel[0] ", " pixel[1] ", " pixel[2] ")";
$('.preview').css('backgroundColor', pixelColor);
// kawalan kemas kini
$('#rVal').val(pixel[0]); >$('#bVal').val (piksel[2]);
$('#rgbVal').val(piksel[0] ',' piksel[1] ',' piksel[2]);
var dColor = piksel[2] 256 * piksel[1] 65536 * piksel[0];
$('#hexVal').val('#' ('0000' dColor.toString(16)) .substr(-6));
}
});
$('#picker').klik(fungsi(e) { // klik pengendali acara
bCanPreview = !bCanPreview;
});



Kod CSS


CSS untuk plat asas warna yang berbeza:

Salin kod


Kod adalah seperti berikut:

/* gaya pemilih warna */ .pemilih warna { warna latar belakang: #222222 ; jejari sempadan: 5px 5px 5px 5px bayang-kotak: 2px 2px 2px #444444;

lebar: 460px;

}

#pemilih {
kursor:
apung:
margin: 10px; 🎜>.kawalan {
apung: kanan;
margin: 10px;
}
.kawalan > ;
overflow: hidden;
padding: 5px ;
.controls label {
float: left; warna latar belakang: #121212;
sempadan: 1px pepejal #2F2F2F; >margin-kiri: 6px;
text-align: center;
teks-transform:
lebar: 75px;
.preview {
background ../images/select.png") ulang tatal tengah tengah lutsinar;
jejari sempadan: 3px;
bayang kotak: 2px 2px 2px #444444;
kursor: penunjuk;
tinggi: 30px;
lebar: 30px;
}


Semoga anda semua menyukainya

Label berkaitan：

html5 pemilih warna

Artikel sebelumnya：Kaedah penulisan teg pengecaman pertuturan HTML5 dengan kemahiran tutorial pictures_html5 Artikel seterusnya：Sila gunakan id dan bukannya nama apabila melaksanakan mata utama dalam petua tutorial HTML5_html5

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

• Bagaimana LLMS Berfungsi: Pra-latihan ke Latihan Pasca, Rangkaian Neural, Hallucinations, dan Kesimpulan
  2025-02-26 03:58:14
• Saya menggabungkan blockchain dan AI untuk menjana seni. Di sini ’ s Apa yang berlaku seterusnya.
  2025-02-26 03:38:10
• Kejuruteraan Prompt Lanjutan: Rantai Pemikiran (COT)
  2025-02-26 03:17:10
• Pengambilan semula Generasi Tambahan di SQLite
  2025-02-26 02:49:09
• Cara menggunakan boilerplate berkuasa LLM untuk membina API Node.js anda sendiri
  2025-02-26 01:08:13
• LLMS untuk pengekodan pada tahun 2024: harga, prestasi, dan pertempuran untuk yang terbaik
  2025-02-26 00:46:10
• Mendorong model bahasa penglihatan
  2025-02-25 23:42:08
• Cara Mengukur Kebolehpercayaan Respons Model Bahasa Besar
  2025-02-25 22:50:13
• Ilusi hidup
  2025-02-25 21:54:11
• Para saintis serius mengenai model bahasa besar yang mencerminkan pemikiran manusia
  2025-02-25 20:45:11

Isu terkini

Perbezaan antara HTML dan HTML5

daripada 1970-01-01 08:00:00

0

0

0

pengesahan html5 untuk symfony 2.1

daripada 1970-01-01 08:00:00

0

0

0

Bolehkah saya menggunakan html5 untuk mencipta kesan menatal imej?

daripada 1970-01-01 08:00:00

0

0

0

Berkenaan penggunaan html5

daripada 1970-01-01 08:00:00

0

0

0

html5 tunjukkan sorok

daripada 1970-01-01 08:00:00

0

0

0

Topik-topik yang berkaitan

Lagi>

• Apakah kaedah penghasilan penghasilan animasi html5?
• Perbezaan antara HTML dan HTML5
• Adakah terdapat perbezaan besar antara bahasa c dan Python?
• Bagaimana untuk menjumlahkan tatasusunan tiga dimensi dalam php
• Platform dagangan mata wang digital rasmi
• Apakah alat semakan kod statik?
• Bagaimana untuk mewujudkan rangkaian kawasan tempatan dalam xp
• Analisis prospek syiling ICP

Cadangan popular

• h5是什么
• 不懂代码怎么制作h5页面？H5页面制作平台推荐
• html5的新特性有哪些
• 什么是h5页面制作
• h5和小程序有什么区别

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

• 
  Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)

  1437738
• 
  Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu

  4298291
• 
  Tutorial Video Permulaan JAVA

  2669383
• 
  Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python

  517006
• 
  Tutorial pengenalan berasaskan sifar PHP

  877939

• 
  Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)

  1437738 kali belajar
• 
  Tutorial Video Permulaan JAVA

  2669383 kali belajar
• 
  Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python

  517006 kali belajar
• 
  Pengenalan pantas kepada pembangunan bahagian hadapan web

  217163 kali belajar
• 
  Kuasai tutorial video PS dari awal

  922550 kali belajar

• 
  [Web front-end] Permulaan pantas Node.js

  9816 kali belajar
• 
  Koleksi lengkap kursus timbunan penuh pembangunan web asing

  7847 kali belajar
• 
  Gunakan GraphQL praktikal bahasa

  6687 kali belajar
• 
  Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah

  839 kali belajar
• 
  Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam

  32766 kali belajar

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan

• [butang borang] kod hubungan borang mesej perusahaan jQuery
• [Kesan khas pemain] Kesan main balik kotak muzik MP3 HTML5
• [Navigasi menu] HTML5 kesan khas menu navigasi animasi zarah sejuk
• [butang borang] jQuery bentuk visual seret dan lepas kod penyuntingan
• [Kesan khas pemain] Kod pemain muzik Kugou tiruan VUE.JS
• [kesan khas html5] Permainan kotak menolak html5 klasik
• [Gambar kesan khas] menatal jQuery untuk menambah atau mengurangkan kesan imej
• [Kesan album foto] Kesan zum hover kulit album peribadi CSS3

• [Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah
• [Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar
• [Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka
• [Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden
• [Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan
• [Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian
• [Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet
• [Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu

• [bahan PNG] Bahan vektor elemen musim panas yang comel (EPS+PNG)
• [bahan PNG] Empat bahan vektor lencana tamat pengajian 2023 merah (AI+EPS+PNG)
• [gambar sepanduk] Burung nyanyian dan troli diisi dengan bahan vektor sepanduk musim bunga reka bentuk bunga (AI+EPS)
• [bahan PNG] Bahan vektor topi pengijazahan emas (EPS+PNG)
• [bahan PNG] Bahan vektor ikon gunung gaya hitam putih (EPS+PNG)
• [bahan PNG] Bahan vektor siluet superhero (EPS+PNG) dengan jubah warna yang berbeza dan pose yang berbeza
• [gambar sepanduk] Bahan vektor sepanduk Hari Arbor gaya rata (AI+EPS)
• [bahan PNG] Sembilan bahan vektor buih sembang meletup gaya komik (EPS+PNG)

• [Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah
• [Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar
• [Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka
• [Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden
• [Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan
• [Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian
• [Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet
• [Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu