Karena saya mulai mempelajari front-end, saya biasanya melihat beberapa kontrol luar biasa di browser yang ingin saya terapkan O (∩_∩) o sendiri. Saya ingin tahu apakah Anda memiliki perasaan ini. Selanjutnya, saya akan berbagi dengan Anda satu. Kontrol asli berasal dari kanan bawah terjemahan Baidu. Anda dapat menemukannya dengan hati -hati, seperti yang ditunjukkan pada gambar:
Rasanya cukup menarik, tidak rumit untuk diterapkan, dan lebih cocok untuk berlatih. Oke, jangan bicara banyak, cukup unggah kode.
Kode HTML:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = 'UTF-8'/>
<title> zoom </iteme>
<tautan rel = "stylesheet" type = "text/css" href = "zoom.css"/>
</head>
<body onload = "zoom ()">
<div id = 'zoom'>
<span title = "share ..."> </span>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<script type = "text/javaScript" src = "zoom.js"> </cript>
</body>
</html>
Kode CSS:
Salinan kode adalah sebagai berikut:
*{
margin: 0px;
padding: 0px;
}
#zoom {
Posisi: Absolute;
Atas: 20px;
Kanan: 200px;
Perbatasan: 1px RGB padat (38.147.255);
Tinggi: 40px;
Lebar: 40px;
}
#zoom> span {
Tampilan: blok inline;
Posisi: Absolute;
Atas: 0px;
Bawah: 0px;
Kiri: 0px;
Lebar: 40px;
latar belakang-gambar: url (sprite.png);
Latar belakang-repeat: No-Repeat;
Latar belakang posisi: -5px -7px;
Opacity: 0.8;
filter: alpha (opacity = 50);/*ie78*/
}
#Zoom ul {
Tampilan: Tidak Ada;
Posisi: Absolute;
Atas: 0px;
Bawah: 0px;
Kiri: 50px;
List-style: tidak ada;
}
#Zoom ul li {
Tampilan: blok inline;
*Tampilan: inline;/*ie7*/
*zoom: 1;/*ie7*/
*margin-kiri: 5px;/*ie7*/
Lebar: 16px;
Tinggi: 16px;
margin-top: 12px;
latar belakang-gambar: url (sprite.png);
Latar belakang-repeat: No-Repeat;
}
#zoom .li1 {
Latar belakang posisi: -57px -20px;
}
#zoom .li2 {
Latar belakang posisi: -77px -20px;
}
#zoom .li3 {
Latar belakang posisi: -98px -20px;
}
#zoom .li4 {
Latar belakang posisi: -119px -20px;
}
#zoom .li5 {
Latar belakang posisi: -140px -20px;
}
#zoom .li6 {
Latar belakang posisi: -161px -20px;
}
#zoom .li7 {
Latar belakang posisi: -182px -20px;
}
#zoom .li8 {
Latar belakang posisi: -203px -20px;
}
#zoom li: hover {
kursor: pointer;
Opacity: 0.8;
filter: alpha (opacity = 50);/*ie78*/
}
#zoom span: hover {
kursor: pointer;
Opacity: 1;
filter: alpha (opacity = 100);/*ie78*/
}
Kode JS:
Salinan kode adalah sebagai berikut:
var zoom = (function () {
var zoomdom = document.geteLementById ('zoom'),
state = {dibuka: false, onaction: false, length: 0},
Menampilkan Span,
ul;
if (zoomdom.firstelementchild) {
showpan = zoomdom.firstelementchild;
ul = showpan.nexteLementsibling;
} else { /*yaitu* /
showpan = zoomdom.firstchild;
ul = showpan.nextsibling;
}
/*IE78 Metode Acara Pendaftaran yang kompatibel*/
var addevent = function (el, eventType, eventhandler) {
if (el.addeventListener) {
el.addeventlistener (eventType, eventhandler, false);
} lain jika (el.attachevent) {
el.attachevent ('on' + eventType, eventhandler);/*ie78*/
}
};
/*IE Metode Pemblokiran Acara Default yang Terkompatibel*/
var stopDefault = function (e) {
if (e && e.preventdefault) {
e.preventdefault ();
} kalau tidak {
window.event.ReturnValue = false;/*yaitu*/
}
};
/*Memperluas kontrol*/
var onopen = function () {
if (state.length> 250) {
ul.style.display = 'inline-block';
state.onaction = false; state.opened = true;
}kalau tidak{
if (! state.onaction) {state.onaction = true;}
state.length += 10;
zoomdom.style.width = state.length + 'px';
setTimeout (Onopen, 0)
}
};
/*Tutup Kontrol*/
var oncollaps = function () {
if (state.length <41) {
state.onaction = false; state.opened = false;
}kalau tidak{
if (! state.onaction) {state.onaction = true;}
state.length -= 10;
zoomdom.style.width = state.length + 'px';
setTimeout (Oncollaps, 0);
}
};
/*Klik panggilan balik tombol pemicu*/
var onspanclick = function (e) {
stopDefault (e);
if (! state.onaction) {
if (! state.opened) {
onopen ();
}kalau tidak{
ul.style.display = 'tidak ada';
Oncollapse ();
}
}
};
return function () {
addEvent (showpan, 'klik', onSpanclick);
};
}) ();
Gambar berikut adalah gambar yang digunakan dalam CSS (gambar ^ _ ^ langsung dari terjemahan Baidu):
Semua orang, ubah saja namanya dan masukkan ke dalam direktori root, atau langsung taruh dua tempat di CSS:
Salinan kode adalah sebagai berikut:
latar belakang-gambar: url (sprite.png);
Ubah ke:
Salinan kode adalah sebagai berikut:
latar belakang-image: url (http://images.cnitblog.com/blog2015/680599/201503/110916459332808.png);
Tidak apa -apa untuk menggunakan sumber daya gambar yang saya unggah secara langsung (terima kasih kepada Internet yang kuat^_^).
Berikutnya adalah efek yang saya capai:
Mari kita bicara tentang poin teknis utama saya selama proses penulisan:
Kontrol ini kompatibel dengan IE7, dan tidak ada IE6, jadi tidak dapat diuji. Masalah kompatibilitas utama yang diselesaikan ditandai dalam kode.
Dengan menggunakan teknologi CSS Sprite, Anda seharusnya menemukannya ^_ ^, teknologi yang baik perlu digunakan.
Terapkan penutupan di JS untuk menghindari polusi global.
Dalam tag skrip HTML, saya juga akan melihat detail kecil ini (walaupun mereka semua sumber daya lokal ()).
Nah, itu saja, tapi kontrol kecil ini masih memiliki ruang untuk perbaikan lebih lanjut. Misalnya, Anda dapat menggunakan atribut CSS3 untuk mencapai penskalaan dinamis div, Anda dapat mengkomponen kontrol ini, dan menggunakan kerangka kerja JQ untuk mengimplementasikannya dengan lebih nyaman (praktik JQ), dll.
Di atas adalah semua konten yang dibagikan oleh artikel ini, saya harap Anda menyukainya.