Hari ini saya telah mengkodekan dua efek khusus lagi: satu dibuat dengan input asli [tipe = rentang], dan yang lainnya sepenuhnya disesuaikan; Berikut ini adalah kode lengkap dan demonstrasi:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> </iteme> <tyle> #tip {position: absolute; Atas: 30px; Kiri: 0; Kanan: 0; Lebar: 200px; Tinggi: 160px; margin: otomatis; Perbatasan: 1px Solid Grey; Latar Belakang: Cornsilk; } #tip div {position: relatif; Lebar: 100%; Tinggi: 80px; Border-Bottom: 1px Solid Grey; } .out {position: relatif; Kiri: 16%; Tampilan: blok inline; Perbatasan: 2px Solid RoyalBlue; margin-top: 20px; Lebar: 130px; Tinggi: 20px; latar belakang-warna: lightgoldenrodyellow; } .in {display: block; Tinggi: 20px; Line-Height: 20px; Teks-Align: Benar; Warna: Putih; Lebar: 50%; Latar Belakang-gambar: Linear-gradient (ke kanan, bubuk 0%,#336699 50%, merah 0px 1px rgba (0, 0, 0, 0, 0, 0, inset, 0px 1px rgba (0, 0, 0, 0, 0, inset, 0px 1px rgba (0, 0, 0, 0, 0, 0, 0, 0, 0, 0px 1px rgba (0, 0, 0, 0, 0, 0, 0, 0, 0PX 1PX RGBA (0 RGBA (0, 0, 0, 0, 0, inset, 0px 1px rgba (0, 0, 0, 0, 0, inset, 0px 1px rgba (0, 0, 0, 0, 0, 0,6) Inset; latar belakang: lightskyblue; perbatasan-radius: 15px; Lebar: 60%; – -Latar Lightsky; Tinggi:} Input [type = "range"] ::-Webkit-Slider-Thumb {-WebKit-AMPREARCE: NOHE; -Moz-box-shadow: 0 -1px 1px Black Inset; Border-Radius: 5px 5px; function () {// Komponen asli var inner = document.geteLementById ('inner1'); Inner.innerHTML = Range.Value; Document.getElementByID ('btn2'); Nilai--; ClearTimeout (ID)}; id1 = setTimeout (function change () {if (value <100) {value ++; inner2.innerHtml = value; inner2.style.width = value * a+'px'; id = setTimeout (function () {clearTimeout (id); ubah ();}, 16.7); {) {cleartimeout (id); ubah ();}; btn2.onmouseup = function () {clearTimeout (ID1); id = "outer1"> <span id = "inner1"> 50 </span> </span> <input id = "range" type = "range" min = "0" max = "100" step = "1" value = "50"> </div> <div id = "d2"> <input id = "btn1" type = "" value = "<" "oTon =" oTn1> <"oTPER2 =" oTN1> <"oTN1> <" oTPER2 = "oTN1" <"oTN1"> <"oTN1"> <"oTN1"> <"oTN1"> <"oTN1"> <"oTN1"> <"D2"> <"D2" ID = "Inner2"> 50 </span> </span> <input id = "btn2" type = "tombol" value = ">"> </div> Tekan dan tahan tombol selama 0,5 detik, dan itu akan terus berubah!Implementasi pertama sangat sederhana, jadi saya tidak akan menjelaskannya, membaca kode sendiri;
Di sini kami terutama memperkenalkan implementasi contoh kedua:
Ketika kita melihat persyaratan atau efek khusus orang lain, jangan terburu -buru melihat kode orang lain. Pertama pikirkan, bagaimana Anda harus mencapainya? Keluarkan ide -ide Anda terlebih dahulu
Prinsip implementasi efek khusus ini:
1. Menyaring rentang dalam rentang;
• Rentang luar: hanya lebar tampilan, tinggi, perbatasan, tidak ada latar belakang
• Rentang di dalam: Tinggi badannya sama dengan bagian luar, lebarnya 50% secara default. Pertama atur warna latar belakang ke gradien linier
2. Acara OnClick dari tombol relatif sederhana. Klik untuk mengubah lebar rentang di dalam dan tampilkan nomor.
3. Saat tombolnya dimusen, mulailah timer dan jalankan fungsi perubahan fungsi setelah 500ms. Fungsi perubahan adalah fungsi yang memanggil kembali dengan setTimeout. Ini akan menelepon kembali sekali tanpa 16.7ms untuk mencapai efek animasi.
Analisis Kesulitan:
1. Kalimat ini var a = parsefloat (window.getComputedStyle (outer2, null) .width)/100;
Digunakan untuk mendapatkan nilai awal jika Anda menggunakan luar.style.width
Itu tidak sepadan, tentu saja Anda juga dapat menetapkan nilai tetap, misalnya, di sini dapat ditetapkan sebagai
var a = 1.3,
Perhatikan bahwa metode GetComputedStyle tidak didukung berdasarkan IE9.
Objek elemen IE memiliki properti CurrentStyle;
2. Kalimat ini
btn1.onmouseUp = function () {clearTimeout (id1);
clearTimeout (id)};
Itu sangat penting. Tanpa itu, Onmosedown akan dipicu sebelum OnClick dipicu. Setelah 500ms, ia akan mulai mengeksekusi, dan kemudian timer luar akan dieksekusi;
3. Tidak ada lagi yang sulit;
Contoh ini sebenarnya berkembang ke banyak aplikasi lain, seperti mengganti layar tengah dengan artikel, gambar, dll., Dan kemudian mengganti tombol dengan yang kustom, efeknya akan keren!
Jika Anda pikir saya memiliki sesuatu yang buruk tentang menulis, tolong tunjukkan!
Contoh sederhana di atas dari tempur praktis JavaScript (rentang asli dan efek khusus khusus) adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.