Mengulangi beberapa roda secara selektif mungkin bukan hal yang buruk. Blog Aaron telah menambahkan menu yang ditangguhkan, yang tampaknya sangat tinggi. Meskipun trik semacam ini bukan pertama kalinya saya melihatnya, saya tidak pernah menulisnya sendiri. Hari ini saya akan secara selektif menulis tentang fungsi ini. Berikut ini adalah proses pengembangan roda ini, yang juga dapat dianggap sebagai proses analisis dan implementasi dokumen persyaratan.
Alamat demo: http://sandbox.runjs.cn/show/to8wdmuy
Unduh Kode Sumber: https://github.com/bjtqti/floatmenu
Langkah pertama adalah membuat struktur bagian DOM:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> appcarrier </iteme>
<tautan rel = "stylesheet" href = "menu.css">
</head>
<body>
<Div id = "Content">
<h1 id = "test1"> test1 </h1>
<p> Masa lalu bisa menyakitkan. Tetapi Anda bisa lari darinya atau belajar darinya </p>
<p> Masa lalu menyakitkan, tetapi Anda melarikan diri atau tumbuh darinya </p>
<p> Seseorang memenuhi takdirnya di jalan yang dia ambil untuk menghindarinya </p>
<p> Seringkali dalam perjalanan untuk melarikan diri dari nasib, tetapi bertemu secara tak terduga </p>
<p> Aturan dimaksudkan untuk dilanggar </p>
<p> Aturan harus dilanggar. </p>
<p> Tahun dapat mengerutkan kulit, tetapi untuk melepaskan antusiasme keriput jiwa. </p>
<p> Meninggal waktu hanya membuat wajah tua, tetapi gairah tidak lagi membuat hati layu. </p>
<h1 id = "test2"> test2 </h1>
<p> Hanya dengan terus mempraktikkan pengetahuan yang telah Anda pelajari, dapatkah Anda benar -benar menguasainya. </p>
<p> Hidup setiap hari sepenuhnya. </p>
<p> Nikmati setiap hari. </p>
<p> Perhatikan bintang -bintang, dan kaki Anda di tanah. </p>
<p> Memiliki ambisi yang tinggi dan menjaga kaki Anda di tanah. </p>
<p> Selalu siap untuk petualangan yang tidak terduga. </p>
<p> Bersiaplah untuk memulai petualangan yang tidak terduga kapan saja. </p>
<p> Hidup penuh kekecewaan. Anda tidak dapat memikirkan hal -hal. Anda harus melanjutkan. </p>
<p> Hidup seringkali tidak bahagia, jangan manjakan di masa lalu, dan bergerak maju dengan berani. </p>
<p> Saya roh bebas. Saya tidak bisa dikurung. </p>
<p> Jiwaku bebas dan tidak boleh terikat. </p>
<p> Terkadang hati melihat apa yang tidak terlihat oleh mata. </p>
<p> Mereka yang tidak terlihat dapat merasakannya </p>
<p> Hal -hal sederhana juga merupakan hal yang paling luar biasa, dan hanya orang bijak yang bisa melihatnya. </p>
<p> Hal yang paling biasa juga adalah hal yang paling luar biasa, dan hanya orang bijak yang memahaminya. </p>
<h1 id = "test3"> test3 </h1>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<h1 id = "test4"> test4 </h1>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
<p> Berapa banyak xxxxxx </p>
</div>
<Div id = "Menubar">
<p> Sembunyikan </p>
<ul>
<li> <a href = "#test1"> test1 </a> </li>
<li> <a href = "#test2"> test2 </a> </li>
<li> <a href = "#test3"> test3 </a> </li>
<li> <a href = "#test4"> test4 </a> </li>
</ul>
</div>
</body>
<skrip src = "menu.js"> </script>
</html>
Langkah kedua adalah menyiapkan file CSS:
Salinan kode adalah sebagai berikut:
ul {
Daftar-gaya-tipe: tidak ada;
}
A {
Dekorasi Teks: Tidak Ada;
}
/*Area konten artikel*/
#isi {
Lebar: 400px;
margin: 0 otomatis;
font-size: 2em;
}
/*Menu apung*/
.menu {
Posisi: diperbaiki;
Atas: 20%;
Kanan: 0;
Lebar: 200px;
Perbatasan: 1px Solid Grey;
Border-Radius: 5px;
}
.menu li {
Tinggi: 2em;
Line-Height: 2em;
}
.merah {
Warna: Merah;
}
.bersembunyi {
Tampilan: Tidak Ada;
}
/*Sembunyikan menu apung*/
.slidein {
transformasi: translate3d (202px, 0, 0);
Durasi transisi: .5s;
}
/*Tampilkan menu mengambang*/
.slideout {
transformasi: translate3d (0, 0, 0);
Durasi transisi: .5s;
}
.static {
Warna:#007aff;
Teks-Align: tengah;
}
/*Tunjukkan bola mengambang*/
.toshow {
Tampilan: Blok;
Lebar: 4.8em;
Tinggi: 2em;
Line-Height: 2em;
Border-Radius: .5em;
Perbatasan: 1px Solid Grey;
transformasi: translate3d (-5em, 0, 0);
Durasi transisi: 1s;
}
Langkah ketiga mulai menulis kode JS:
Salinan kode adalah sebagai berikut:
(function (doc) {
// Kumpulkan lokasi tautan untuk setiap bab
var pos = [],
// Koleksi item di menu
Links = doc.geteLementsbyTagname ('a'),
// Kumpulkan judul bab ini
judul = doc.geteLementsbyTagname ('h1'),
// menu gantung
menu = doc.geteLementById ('menubar'),
// Seleksi saat ini
currentItem = null;
// tambahkan gaya merah
var addclass = function (elemen) {
currentItem && currentItem.removeattribute ('class');
element.setAttribute ('class', 'red');
currentItem = elemen;
},
// Halaman web diluncurkan tinggi:
getscrolltop = function () {
return math.ceil (document.body.scrolltop) +1;
},
// Hitung posisi gulir
startCroll = function () {
var scrolltop = getScrollTop (),
len = judul.length,
i = 0;
//Pasal 1
if (scrolltop> = 0 && scrolltop <pos [0]) {
addClass (tautan [0]);
kembali;
}
// yang terakhir
if (scrolltop> = pos [len-1]) {
addClass (tautan [len-1]);
kembali;
}
//tengah
untuk (; i <len; i ++) {
if (scrolltop> pos [i] && scrolltop <pos [i+1]) {
addClass (tautan [i]);
merusak;
}
}
};
// Klik tautan dalam daftar untuk mengubah warna
menu.onClick = function (e) {
var target = e.target || E.Srcelement;
if (target.nodename.tolowercase () === 'a') {
// daftar indikasi status item
addClass (target);
kembali;
}
if (target.nodename.tolowercase () === 'p') {
if (target.classname == 'static') {
// Sembunyikan menu
this.classname = 'menu slidein';
setTimeout (function () {
target.classname = 'static toshow';
target.innerhtml = 'show';
}, 1000);
}kalau tidak{
// Tampilkan menu
target.classname = 'statis';
target.innerhtml = 'hide';
this.classname = 'menu slideout';
}
}
}
// Hitung posisi awal setiap bab
var ln = judul.length;
while (-ln> -1) {
//titleshtlen media.offsetparent.offsettop = 0;
pos.unshift (judul [ln] .offsettop);
}
startcroll ();
//Menggulir
window.onscroll = function () {
startcroll ()
}
})(dokumen);
menganalisa:
1. Menerapkan lompatan otomatis ke bagian yang ditentukan
Langkah ini dapat dilakukan dengan menggunakan fungsi jangkar dari tag <a>. Karena HTML5 tidak mendukung atribut nama di masa depan (HTML5 tidak mendukungnya. Tentukan nama jangkar.), Pertimbangkan untuk menggunakan ID untuk melompat.
2. Identifikasi bab mana dalam konten di sebelah kiri milik item di menu mengambang.
Langkah ini adalah poin yang sulit, mari kita analisis secara singkat:
2.1 Kasing pertama adalah mengklik item menu secara manual. Ini mudah, cukup identifikasi elemen yang diklik.
2.2 Dalam kasus kedua, gulir atau seret scrollbar melalui tombol mouse tengah. Pada saat ini, Anda perlu mengaitkan konten di sebelah kiri dan item menu di sebelah kanan. Ini adalah bagian yang paling sulit. Pertimbangkan strategi menerapkan langkah demi langkah, dimulai dengan mudah dan kemudian sulit, dan masing -masing menerobos.
2.2.1 Kumpulkan ketinggian koordinat elemen judul. Itu adalah ketinggian vertikal dari semua tag H1. Simpan array 1.
2.2.2 Kumpulkan elemen A dalam item menu dan simpan di Array 2.
2.2.3 Dengarkan acara gulir dan tentukan item menu mana konten saat ini milik.
Saat mengambil satu langkah, disarankan untuk menggambar pada kertas naskah:
A1
******************
* A2
*
******************
* A3
*
******************
*
* A4
*
Setiap kali Anda menggulir, Anda akan menentukan kisaran jarak gulir saat ini. Jika 0 hingga A1, itu adalah Bab 1, A1 ke A2, itu adalah Bab 2, dan seterusnya.
Mengenai ketinggian posisi elemen, saya cukup menggunakan elemen.offsettop untuk mendapatkannya di sini. Mungkin ada masalah kompatibilitas. Jika Anda menggunakan jQuery, itu harus $ ('elemen'). Offset (). Top,
Demikian pula, saya hanya menggunakan document.body.scrolltop untuk mendapatkan ketinggian scrollbar. Jika diganti dengan jQuery, itu harus $ (jendela) .scrolltop ();
Tujuan menggambar adalah untuk mengkonkretkan masalah abstrak, membantu kita berpikir dan mencari tahu aturannya. Mungkin itu akan terlihat lebih tinggi dengan menyebutnya "pemodelan".
Harus ditekankan bahwa hubungan dalam Array 1 dan Array 2 harus sesuai satu per satu. Misalnya, <a href = "#h1"> yang sesuai adalah <h1 id = "h1">.
2.3 Dalam kasus ketiga, indikator status menu saat Anda langsung memasukkan halaman. Misalnya, jika Anda memasukkan melalui alamat seperti index.html#H3, H3 di menu harus disorot.
3. Laksanakan tampilan dan sembunyikan animasi menu mengambang.
3.1 Langkah ini harus relatif sederhana, Anda dapat mempertimbangkan untuk melakukannya terlebih dahulu. Cukup gunakan properti tramsform dari CSS3. Itu sederhana dan efisien. Jika Anda melintasi browser, harap kompatibel.
Perhatikan bahwa transformasi: translate3d (sumbu x, sumbu y, sumbu z); Menggunakan 3D dapat menggunakan akselerasi perangkat keras untuk meningkatkan efek animasi, tetapi konsumsi daya akan meningkat, jadi memanfaatkannya dengan baik! Parameter pertama adalah mengontrol arah kiri dan kanan. Jika positif, itu berarti bergerak ke kanan, dan jika itu negatif, itu berarti bergerak ke kiri. Ini sebenarnya tidak ketat. Bahkan, itu harus ditentukan berdasarkan titik referensi. Misalnya, ketika koordinat x suatu elemen adalah 0, maka nilai x ditingkatkan ke kanan dan dikurangi ke kiri, dan 0 diatur ulang.
Setelah analisis, kode ditulis. Tidak ada yang bisa dikatakan tentang ini. Nikmati perasaan musik yang dihasilkan dengan mengetik keyboard.
Setelah menulis, pratinjau, klik menu, lompat ke bab yang ditentukan, dan klik item untuk berubah merah, menyegarkan halaman saat ini, dan tampilan ketergantungannya benar. Geser roda gulir, dan item menu berubah sesuai dengan perubahan konten. Seret bilah gulir. Hal yang sama benar. Terakhir, klik untuk menyembunyikan, menarik kembali menu, klik untuk ditampilkan, dan menu meluncur keluar. Ini akan menyelesaikan fungsi suspensi.
Di atas adalah semua tentang artikel ini, saya harap Anda menyukainya.