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 颜色选择器

sumber：php.cn

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

• Apakah itu NullPointerException, dan bagaimana saya membetulkannya?
  2024-10-22 09:46:29
• Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C
  2024-10-13 13:53:41
• Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula
  2024-10-12 12:15:51
• Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu
  2024-10-11 22:47:31
• Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak
  2024-10-11 19:36:51
• Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak
  2024-10-11 15:50:41
• Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula
  2024-10-11 15:07:41
• PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web
  2024-10-11 14:21:21
• Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda
  2024-10-11 12:59:11
• Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula
  2024-10-11 12:17:31

Isu terkini

Bagaimanakah saya boleh mendapatkan imej saya dipaparkan pada paparan utama halaman? Apa yang saya mahu lakukan ialah menerima beberapa gambar menggunakan NASAAPI. Foto-foto i...

daripada 2024-04-06 15:33:12

0

1

433

Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...

daripada 2024-04-05 12:57:00

0

1

456

Apakah perbezaan antara enctype dan formenctype dalam HTML5? Saya hanya tertanya-tanya apakah perbezaan antara atribut enctype dan formenctype dalam HT...

daripada 2024-04-02 11:47:56

0

1

275

Jadikan halaman itu mesra mudah alih? Saya mempunyai banyak halaman web dan beberapa laman web. Masalahnya, saya seorang pemula....

daripada 2024-04-01 20:42:38

0

1

259

Topik-topik yang berkaitan

Lagi>

• Apakah kaedah penghasilan penghasilan animasi html5?
• Perbezaan antara HTML dan HTML5
• Perbezaan antara flutter dan uniapp
• Cara memasang penterjemah pycharm
• ^quxjg$c
• Apakah arahan penutupan Linux?
• Sebab trafik berlebihan pada pelayan laman web luar negara
• bootmgr tiada dan tidak boleh boot

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)

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

  4255031
• 
  Tutorial Video Permulaan JAVA

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

  502886
• 
  Tutorial pengenalan berasaskan sifar PHP

  843255

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

  1415834 kali belajar
• 
  Tutorial Video Permulaan JAVA

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

  502886 kali belajar
• 
  Pengenalan pantas kepada pembangunan bahagian hadapan web

  215197 kali belajar
• 
  Kuasai tutorial video PS dari awal

  874584 kali belajar

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

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

  4847 kali belajar
• 
  Gunakan GraphQL praktikal bahasa

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

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

  20739 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

• [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)
• [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
• [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
• [PNG素材] 金色的毕业帽矢量素材(EPS+PNG)
• [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)
• [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
• [banner图] 扁平风格的植树节banner矢量素材(AI+EPS)
• [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(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