Hari ini saya akan menulis contoh kecil, menggunakan js dan css untuk menulis kotak mengambang yang dapat disembunyikan secara otomatis. CSS pasti digunakan untuk mengontrol gaya, dan js digunakan untuk mengontrol tampilan dan penyembunyian. Menampilkan dan menyembunyikan biasanya diimplementasikan dalam dua cara: 1. Gunakan js untuk mengontrol atribut tampilannya; 2. Gunakan js untuk mengontrol ukurannya.
Apa yang akan kita bicarakan hari ini adalah mewujudkan tampilan dan penyembunyian elemen dengan mengontrol ukurannya. Prinsipnya adalah: mencatat peristiwa pergerakan mouse masuk dan keluar 1. Saat mouse bergerak ke objek lagi, atur lebarnya menjadi 1. Lebar dikembalikan. Caranya sangat sederhana, yuk kita lihat!
Keadaan tersembunyi:
Garis sempit di sebelah kiri adalah bingkai mengambang setelah disembunyikan.
Status tampilan:
Ketika mouse menggeser kotak mengambang di sebelah kiri, kotak mengambang akan ditampilkan kembali.
Gaya CSS:
Copy kode kodenya sebagai berikut:
<gaya>
* { ukuran font:12px; keluarga font:Verdana, 宋体;
html, isi { margin:0px; bantalan:0px; luapan:tersembunyi }
.b { margin:0px; bantalan:0px; luapan:otomatis }
.line0 { tinggi garis:20px; warna latar:kuning muda;
.line1 { tinggi garis:18px; warna latar:biru muda;
.w { posisi:absolute; angkat:10px; atas:10px; lebar:1px; tinggi:300px; batas:281;
.t { tinggi garis:20px; tinggi:20px; lebar:160px; luapan:tersembunyi; warna latar:#27C; warna:putih; tengah; }
.winBody { tinggi:270px; lebar:160px; overflow-x:auto; overflow-y:auto; border-top:1px inset biru;
</gaya>
Kode JS:
Copy kode kodenya sebagai berikut:
<skrip tipe="teks/javascript">
fungsi pertunjukan saya(){
//document.getElementById('mydiv').style.display = "tidak ada";
document.getElementById('mydiv').style.width = "160px";
} //memblokir
fungsi sembunyikan saya(){
//document.getElementById('mydiv').style.display = "blok";
dokumen.getElementById('mydiv').style.width="1px";
}
//Untuk pengujian, buat beberapa konten secara acak untuk memfasilitasi efek pengujian.
for(var i=0; i<400; i++)document.write("<div class=/"line"+(i%2)+"/">"+(Array baru(20)).join(( Matematika.acak()*1000000).toString(36)+" ")+"<//div>");
fungsi baru(w,b,c,d,o){
d=dokumen;b=d.body;o=b.childNodes;c="namakelas";
b.appendChild(w=d.createElement("div"))[c]= "b";
for(var i=0; i<o.length-1; i++)if(o[i][c]!="w")w.appendChild(o[i]),i--;
(jendela.onresize = function(){
w.style.width = d.documentElement.clientWidth + "px";
w.style.height = d.documentElement.clientHeight + "px";
})();
<span style="white-space:pre"> </span>}
</skrip>
Kode HTML:
Copy kode kodenya sebagai berikut:
<tubuh>
<div id="mydiv" onmousemove="myshow()" onmouseout="myhide()">
<div>Informasi Siswa</div>
<div>
ID Pelajar: <label>0123456789 </label><br><br>
Nama: <label>Xiao Ming</label><br><br>
Perguruan Tinggi: <label>Perguruan Tinggi Perangkat Lunak</label><br><br>
Jurusan: <label>Rekayasa Perangkat Lunak</label><br><br>
Kelas: <label>Kelas 1</label><br><br>
</div>
</div>
</tubuh>
Gunakan kotak mengambang untuk menampilkan beberapa informasi. Ketika Anda perlu melihatnya, arahkan ke sana dan itu akan keluar, yang sangat nyaman; ketika Anda memindahkan mouse ketika tidak lagi diperlukan, ia akan pergi dengan sendirinya . Meskipun sangat sederhana, ia memiliki pengalaman pengguna yang baik. Membuat hal-hal yang membuat pengguna nyaman adalah upaya kami yang terus-menerus.