Ini akhir pekan, saatnya untuk meringkas besok. Saya merasa seperti telah belajar beberapa hal, tetapi saya merasa belum banyak belajar. Mari kita analisis besok. Mari kita lihat masalah yang ingin saya analisis hari ini.
Setiap orang akrab dengan gambar ini:
-
Hari ini kami akan menganalisis dan membuatnya. Pertama-tama mari kita perkenalkan karakteristik kotak pop-up ini:
* Selalu dilampirkan ke perbatasan halaman
* Jangan ubah posisi saat halaman naik dan turun
* Ketika mouse lewat, informasi terperinci akan muncul, dan ketika pergi, ia akan kembali ke keadaan aslinya.
Dengan cara ini, kita secara kasar dapat memikirkan beberapa fungsi yang mungkin: penentuan posisi absolut dari pos; pemantauan dan metode mouse yang lewat; Ini pasti akan digunakan, tetapi apa saja penggunaan lain selain ini, dan bagaimana mereka diterapkan?
1. Menerapkan semua status antarmuka yang ditampilkan
Tulis kode html dulu
Salinan kode adalah sebagai berikut:
<span style = "font-size: 12px;"> <div id = "shareleft">
<div>
<p> <a href = "#"> TIP </a> </p>
</div>
<p id = "MainMsg" onMouseOver = "showTip ()">
Berbagi ke
</p>
</div> </span>
Kemudian penyandian gaya CSS
Salinan kode adalah sebagai berikut:
<span style = "font-size: 12px;">*{margin: 0; padding: 0;}
#shareleft {position: fixed; latar belakang-warna: kuning; atas: 50px; lebar: 300px; tinggi: 600px; kanan: 0px;}
#mainmsg {warna: #fff; posisi: absolute; kursor: pointer; text-align: center; latar belakang-warna: merah; atas: 60px; lebar: 100px; tinggi: 400px; padding: 20px 0 0 10px; margin-left: -100px; border-radius: 50px 0 0 50px; }
.list {float: right; latar belakang-warna: #fff; lebar: 280px; tinggi: 580px; margin: 10px 10px 10px 10px;} </span>
Mari kita analisis poin -poin utama di sini: a. Posting: Posisi tetap sangat bagus; B. Kanan: 0px, aplikasi spesifik ini akan dijelaskan secara rinci nanti, tetapi juga sangat penting di sini; 3. #mainmsg margin -kiri: -100px, tempat ini juga sangat penting, jadi mari kita lihat efeknya
Haha, ini adalah kotak pop-up terbesar tahun ini. Mari kita terus berbicara tentang efek pop-up JS
2. Sembunyikan bagian terperinci, mendorong bagian itu bocor di luar
Ini relatif sederhana. Untuk memodifikasinya, cukup ubah nilai yang tepat dari Shareleft, kanan = -300px, yang merupakan lebar div
3. JS untuk mencapai efek pop-up
Ini bukan pertama kalinya kami menggunakan efek timer ini. Kami telah menerapkannya ketika JS mengimplementasikan efek mesin tik. Di sini kami baru saja mengubah objek waktu.
Salinan kode adalah sebagai berikut:
<span style = "font-size: 12px;"> <script type = "text/javascript">
var timer = null;
var count = 0;
var tip = fungsi (posisi, target, kecepatan) {
clearInterval (timer);
timer = setInterval (function () {
if (count> position.offsetWidth) {
clearInterval (timer);
}kalau tidak{
position.style.right+= window.count+"px";
window.count ++;
};
}, kecepatan);
};
function showTip () {
var position = document.geteLementById ("shareleft");
tip (position, document.body.clientwidth, 1000);
};
</script> </span>
Poin terpenting yang harus diperhatikan dalam kode ini adalah: OffsetWidth, .Style.Right, dll. Saya tidak akan membicarakan hal ini untuk saat ini. Saya akan memperkenalkannya secara khusus. Mari kita gunakan seperti ini terlebih dahulu, ketahuilah artinya.
Setelah Anda memahami ini secara menyeluruh, efeknya akan dicapai sekarang, sehingga Anda dapat mencobanya juga.