Kemahiran javascript menu terapung buatan tangan_javascript

Mencipta semula beberapa roda secara selektif tidak semestinya sesuatu yang buruk. Menu terapung telah ditambahkan pada blog Aaron, yang nampaknya sangat mewah. Walaupun ini bukan kali pertama saya melihat helah seperti ini, saya tidak pernah menulisnya sendiri. Hari ini saya akan menulis secara selektif tentang fungsi ini. Berikut ialah proses pembangunan roda ini, yang juga boleh dianggap sebagai proses analisis dan pelaksanaan dokumen keperluan.

Alamat demo: http://sandbox.runjs.cn/show/to8wdmuy

Muat turun kod sumber: https://github.com/bjtqti/floatmenu

Langkah pertama ialah mencipta struktur nod DOM:

Salin kod Kod adalah seperti berikut:

& Lt; h1 id = "test1" & gt; test1 & lt;/h1 & gt;
                             

Masa lalu boleh menyakitkan tetapi anda boleh lari daripadanya atau belajar daripadanya

& Lt; p & gt;                  

Seseorang menemui takdirnya di jalan yang dia lalui untuk mengelakkannya

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        “                                                                 

Peraturan dimaksudkan untuk dilanggar

               

Peraturan harus dilanggar.

                  

Bertahun-tahun mungkin mengerutkan kulit, tetapi melepaskan semangat mengerutkan jiwa.

& Lt; p & gt; berlalunya tahun hanya membuat wajah tua, dan semangat tidak lagi layu hati.

& Lt; h1 id = "test2" & gt; test2 & lt;/h1 & gt;
& Lt; p & gt; Hanya dengan sentiasa mengamalkan pengetahuan anda boleh menguasainya.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    

Nikmati setiap hari.

& Lt; p & gt; menjaga mata anda pada bintang -bintang, dan kaki anda di atas tanah. & Lt;/p & gt;
& Lt; p & gt;

                                                                                                                                                                                                                                  ... p>
& Lt; p & gt;

                    

Hidup penuh dengan kekecewaan. Anda tidak boleh teruskan.

& Lt; p & gt;

                                              

Saya seorang yang merdeka, saya tidak boleh dikurung.

Jiwa saya bebas dan tidak harus terikat.

                                                                                                                                                                                                                                                                                                                                                                                            & Lt; P & gt;                                      

Perkara yang mudah juga merupakan perkara yang paling luar biasa, dan hanya orang yang bijak dapat melihatnya.

               

Perkara yang paling biasa juga adalah perkara yang paling luar biasa, hanya orang yang bijak sahaja yang dapat memahami.

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                >test3
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     ;              

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

test4

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

             

how many xxxxxx

   

                                                    

Sembunyikan

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

Langkah kedua ialah menyediakan fail css:

Salin kod

Kod adalah seperti berikut: ul { Jenis gaya senarai: tiada; } sebuah {

hiasan teks: tiada;

}
/*Kawasan kandungan artikel*/
#kandungan {
Lebar:400px;
margin: 0 auto;
saiz fon: 2em;
}
/*Menu digantung*/
.menu {
kedudukan: tetap;
Atas:20%;
Kanan: 0;
Lebar:200px;
Sempadan: 1px kelabu padu;
Jejari sempadan: 5px;
}
.menu li {
Tinggi: 2em;
Ketinggian garisan: 2em;
}
.merah {
Warna: merah;
}
.sembunyikan {
Paparan: tiada;
}
/*Sembunyikan menu terapung*/
.slideIn {
Transform: translate3d(202px, 0, 0);
Tempoh peralihan: .5s;
}
/*Paparkan menu terapung*/
.slideOut {
Transform: translate3d(0, 0, 0);
Tempoh peralihan: .5s;
}
.statik {
Warna:#007aff;
Jajaran teks: tengah;
}
/*Paparkan bola yang digantung*/
.untukTunjukkan {
Paparan: blok;
          lebar: 4.8em;
Tinggi: 2em;
         ketinggian garisan: 2em;
         jejari sempadan: .5em;
Sempadan:1px kelabu padu;
Transform: translate3d(-5em, 0, 0);
Tempoh peralihan: 1s;
}



Langkah ketiga ialah mula menulis kod js:

Salin kod

Kod adalah seperti berikut:

(fungsi(doc){
//Kumpulkan lokasi pautan setiap bab
var pos = [],
//Kumpul item pada menu
          pautan = doc.getElementsByTagName('a'),
//Kumpul tajuk bab
titles = doc.getElementsByTagName('h1'),
//Menu yang digantung
           menu = doc.getElementById('menubar'),
//Pilihan semasa
           currentItem=null;
//Tambah gaya merah
var addClass = fungsi (elemen){
                 currentItem && currentItem.removeAttribute('class');
                element.setAttribute('class','red');
                  item semasa = elemen;
         },
// Halaman web digulung tinggi:
         getScrollTop = fungsi (){
                kembalikan Math.ceil(document.body.scrollTop) 1;
},
//Kira kedudukan tatal
StartScroll = fungsi (){
            var scrollTop = getScrollTop(),
                   len = tajuk. panjang,
                  i = 0;
//Perkara 1
Jika(scrollTop>=0 && scrollTop                    addClass(pautan[0]);
                  kembali;
            }
// Terakhir <条> Jika(scrollTop>=pos[len-1]){
                    addClass(pautan[len-1]);
                  kembali;
            }
// Di tengah untuk(;i Jika(scrollTop > pos[i] && scrollTop < pos[i 1]){
                      addClass(pautan[i]);
rehat;
                }
            }
};
//Klik pautan dalam senarai untuk menukar warna
menu.onclick=function(e){
        var target = e.target || If(target.nodeName.toLowerCase() === 'a'){
//Petunjuk status item senarai
               addClass(sasaran);
               kembali;
         }
If(target.nodeName.toLowerCase() === 'p'){
If(target.className == 'statik'){
//Sembunyikan menu
This.className = 'menu slideIn';
                    setTimeout(function(){
                                  target.className = 'static toShow';
Target.innerHTML = 'Paparan';
                   },1000);
                }lain{
//Tunjukkan menu
                         target.className = 'statik';
                        target.innerHTML = 'Sembunyikan';
This.className = 'menu slaidOut';
            }
         }
}
//Kira kedudukan awal setiap bab
var ln = titles.length;
; sambil(--ln>-1){
​​​​ //titles[len].offsetParent.offsetTop = 0;
          pos.unshift(titles[ln].offsetTop);
}
StartScroll();
//Dengar tatal
​ window.onscroll = function(){
StartScroll()
}
})(dokumen);

Analisis:

1. Lompat ke bahagian yang ditentukan secara automatik

Langkah ini boleh dilakukan dengan menggunakan fungsi sauh teg menggunakan ID untuk melompat.

2. Kenal pasti bab dalam kandungan di sebelah kiri kepunyaan item dalam menu terapung itu.

Langkah ini sukar, mari analisa secara ringkas dahulu:

2.1 Situasi pertama ialah klik pada item menu secara manual. Ini mudah, cuma kenal pasti elemen yang diklik.

2.2 Dalam kes kedua, tatal melalui butang tengah tetikus atau seret bar skrol Pada masa ini, anda perlu mengaitkan kandungan di sebelah kiri dengan item menu di sebelah kanan. Pertimbangkan strategi untuk melaksanakannya langkah demi langkah, bermula dengan perkara yang mudah dan kemudian perkara yang lebih sukar, dan mengalahkannya satu demi satu.

2.2.1 Kumpul dahulu ketinggian koordinat unsur tajuk. Itulah ketinggian menegak semua teg h1. Simpan dalam tatasusunan 1.

2.2.2 Kumpulkan elemen a dalam item menu dan simpannya dalam tatasusunan 2.

2.2.3 Dengar acara tatal dan tentukan item menu mana yang dimiliki oleh kandungan semasa.

Apabila melakukan langkah, disyorkan untuk melukis gambar pada kertas manuskrip:

A1

****************
                                                                                                                                                   *
                                                                                                                                                                                                                                                                                                                                                                                                *
                                                                                                                                                                                                                                             *
                                                                                                      *

Setiap kali anda menatal, tentukan selang mana jarak tatal semasa Jika ia adalah 0 hingga A1, ia adalah Bab 1, A1 hingga A2 ialah Bab 2, dan seterusnya.

Mengenai kedudukan dan ketinggian elemen, saya hanya menggunakan element.offsetTop untuk mendapatkannya Mungkin terdapat masalah keserasian Jika anda menggunakan jquery untuk melakukannya, ia sepatutnya $('elemen').offset(). atas,

Begitu juga, ketinggian bar bergolek, saya juga hanya menggunakan document.body.scrolltop untuk mendapatkannya Jika ia digantikan dengan jquery, ia sepatutnya $ (tetingkap

).

Fungsi lukisan adalah untuk menjadikan masalah abstrak menjadi konkrit dan membantu kita berfikir dan mengetahui peraturannya. Mungkin memanggilnya "pemodelan" akan menjadi lebih mulia.

Perlu ditekankan bahawa hubungan antara tatasusunan 1 dan tatasusunan 2 haruslah surat-menyurat satu dengan satu. Contohnya,

2.3 Situasi ketiga ialah penunjuk status menu apabila memasuki halaman secara langsung. Contohnya, apabila memasukkan melalui alamat seperti index.html#h3, h3 dalam menu harus diserlahkan.

3. Laksanakan paparan dan animasi menyembunyikan menu terapung.

3.1 Langkah ini sepatutnya agak mudah, jadi anda boleh mempertimbangkan untuk melakukannya terlebih dahulu. Hanya gunakan atribut tramsform CSS3 Ia adalah mudah dan cekap Jika ia adalah penyemak imbas silang, perhatikan keserasian.

Beri perhatian untuk mengubah: translate3d(x-axis, y-axis, z-axis); Menggunakan 3D, anda boleh menggunakan pecutan perkakasan untuk meningkatkan kesan animasi, tetapi penggunaan kuasa akan meningkat, jadi gunakannya dengan sebaiknya! Parameter pertama mengawal arah kiri dan kanan Jika ia positif, ia bermakna bergerak ke kanan Jika ia negatif, ia bermakna bergerak ke kiri. Ini sebenarnya tidak ketat Malah, ia harus ditentukan berdasarkan titik rujukan Contohnya, koordinat x unsur apabila ia pegun ialah 0, kemudian naikkan nilai x ke kanan, turun ke kiri. dan 0 ditetapkan semula.

Selepas analisis, tiba masanya untuk menulis kod. Tiada apa yang boleh dikatakan tentang ini. Nikmati kemuzikan menaip pada papan kekunci.

Selepas selesai menulis, pratontonnya, klik pada menu, lompat ke bab yang ditentukan, dan klik pada item untuk bertukar merah, muat semula halaman semasa, dan kebergantungan akan dipaparkan dengan betul. Luncurkan roda skrol, dan item menu akan berubah dengan sewajarnya apabila kandungan berubah Seret bar skrol, dan perkara yang sama berlaku. Akhirnya, klik untuk menyembunyikan, dan menu akan menarik balik . Ini melengkapkan fungsi terapung.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.