Pelaksanaan JavaScript Terjemahan Baidu butang kongsi boleh lipat list_javascript kemahiran

Sejak saya mula belajar bahagian hadapan, saya biasanya mahu melaksanakan O(∩_∩)O sendiri apabila saya melihat beberapa kawalan yang luar biasa pada penyemak imbas Saya tertanya-tanya sama ada anda merasakan perkara ini. Seterusnya, saya akan berkongsi satu dengan anda Kawalan asal datang dari sudut kanan bawah Terjemahan Baidu Anda sepatutnya dapat mencarinya jika anda mencari dengan teliti, seperti yang ditunjukkan dalam gambar:

Rasanya agak menarik dan tidak rumit untuk dilaksanakan, jadi ia lebih sesuai untuk diamalkan. Okey, jangan omong kosong lagi, mari terus ke kod.

kod html:

Salin kod Kod adalah seperti berikut:

                                                                                                                                                                                                        ​ ​


          
Dilihatfer
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     

                                       

                                        

& Lt; li tity = "rangkaian ricker" = "li4" & gt; & Lt; li title = "baidu" class = "li5" & gt; & lt;/li & gt;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                         

& Lt; li title = "rangkaian gembira" = "li8" & gt; ...                                                                                                            





kod css:

Salin kod

Kod adalah seperti berikut:

*{
  jidar:0px;
  padding:0px;
}
#zoom{
  jawatan: mutlak;
  atas: 20px;
  kanan: 200px;
  sempadan: 1px rgb pepejal(38,147,255);
  ketinggian: 40px;
  lebar: 40px;
}
#zoom > rentang{
  paparan: blok sebaris;
  jawatan: mutlak;
  atas: 0px;
  bawah: 0px;
  kiri: 0px;
  lebar: 40px;
  imej latar belakang: url(sprite.png);
  ulangan latar belakang: tiada ulangan;
  kedudukan latar belakang: -5px -7px;
  kelegapan: 0.8;
  penapis:Alpha(opacity=50);/*IE78*/
}
#zoom ul{
  paparan: tiada;
  jawatan: mutlak;
  atas: 0px;
  bawah: 0px;
  kiri: 50px;
  gaya senarai: tiada;
}
#zoom ul li{
  paparan: blok sebaris;
  *paparan: sebaris;/*IE7*/
  *zum:1;/*IE7*/
  *margin-kiri: 5px;/*IE7*/
  lebar: 16px;
  ketinggian: 16px;
  jidar atas: 12px;
  imej latar belakang: url(sprite.png);
  ulangan latar belakang: tiada ulangan;
}
#zoom .li1{
  kedudukan latar belakang: -57px -20px;
}
#zoom .li2{
  kedudukan latar belakang: -77px -20px;
}
#zoom .li3{
  kedudukan latar belakang: -98px -20px;
}
#zoom .li4{
  kedudukan latar belakang: -119px -20px;
}
#zoom .li5{
  kedudukan latar belakang: -140px -20px;
}
#zoom .li6{
  kedudukan latar belakang: -161px -20px;
}
#zoom .li7{
  kedudukan latar belakang: -182px -20px;
}
#zoom .li8{
  kedudukan latar belakang: -203px -20px;
}

#zoom li:tuding{
  kursor: penunjuk;
  kelegapan: 0.8;
  penapis:Alpha(opacity=50);/*IE78*/
}
#zoom span:tuding{
  kursor: penunjuk;
  kelegapan: 1;
  penapis:Alpha(opacity=100);/*IE78*/
}

js代码：

复制代码 代码如下:

var zum = (fungsi(){
var zoomDom = document.getElementById('zoom'),
        keadaan = {dibuka: palsu, tindakan: palsu, panjang: 0},
showSpan,
       ul;
jika (zoomDom.firstElementChild) {
ShowSpan = zoomDom.firstElementChild;
ul = showSpan.nextElementSibling;
}lain{ /*IE*/
ShowSpan = zoomDom.firstChild;
ul = showSpan.nextSibling;
}
/*Kaedah acara pendaftaran serasi dengan IE78*/
var addEvent = function(el, eventType, eventHandler){
Jika(el.addEventListener){
       el.addEventListener(eventType, eventHandler,false);
} else if(el.attachEvent){
​​el.attachEvent('on' eventType, eventHandler);/*IE78*/
}
};
/* Kaedah acara lalai menyekat serasi IE*/
var stopDefault = function(e){
Jika(e&&e.preventDefault){
e.preventDefault();
} lain {
        window.event.returnValue = false;/*IE*/
}
};
/*Kembangkan kawalan*/
var onOpen = function(){
Jika(state.length>250){
​​ul.style.display = 'blok sebaris';
       state.onaction = palsu; state.open = benar;
}lain{
Jika(!state.onaction){ state.onaction = true;}
       keadaan.panjang = 10;
zoomDom.style.width = state.length 'px';
setTimeout(onOpen, 0)
}
};
/*Kawalan tutup*/
var onCollapse = function(){
Jika(nyatakan.panjang<41){
        state.onaction = false; state.open = false;
}lain{
Jika(!state.onaction){ state.onaction = true;}
       keadaan.panjang -= 10;
zoomDom.style.width = state.length 'px';
​​​ setTimeout(onCollapse, 0);
}
};
/*Panggil balik apabila mengklik butang pencetus*/
var onSpanClick = function(e){
StopDefault(e);
Jika(!state.onaction){
Jika(!nyatakan.dibuka){
onOpen();
}lain{
         ul.style.display = 'tiada';
onCollapse();
}
}
};
kembalikan fungsi(){
​ addEvent(showSpan, 'klik', onSpanClick);
};
})();

Gambar di bawah adalah gambar yang digunakan dalam css (gambar diambil terus dari Baidu Translate^_^):

Muat turunnya, cuma tukar nama dan letakkannya dalam direktori akar, atau terus tambah dua tempat dalam css:

Salin kod Kod adalah seperti berikut:

imej latar belakang: url(sprite.png);

ditukar kepada:

Salin kod Kod adalah seperti berikut:

imej latar belakang: url(http://images.cnitblog.com/blog2015/680599/201503/110916459332808.png);

Es ist auch möglich, die von mir hochgeladene Bildressource direkt zu verwenden (dank des leistungsstarken Internets^_^).

Das Folgende ist eine Demonstration der Wirkung, die ich erzielt habe:

Dann lass mich über die wichtigsten technischen Punkte im Schreibprozess sprechen:

Das Steuerelement ist mit IE7 kompatibel, daher kann ich es nicht testen. Die wichtigsten zu lösenden Kompatibilitätsprobleme sind im Code markiert.
Es verwendet CSS-Sprites-Technologie, Sie sollten es inzwischen entdeckt haben^_^, gute Technologie sollte verwendet werden.

Wenden Sie Schließungen in JS an, um globale Umweltverschmutzung zu vermeiden.

In HTML wird das Skript-Tag am Ende des Textkörpers platziert. Dieses kleine Detail fällt mir auch auf (obwohl es sich bei allen um lokale Ressourcen handelt ╮(╯▽╰)╭).
Okay, das war's, aber es gibt noch Raum für weitere Verbesserungen bei diesem kleinen Steuerelement. Sie können beispielsweise CSS3-Attribute verwenden, um eine dynamische Skalierung von Divs zu erreichen, Sie können dieses Steuerelement in Komponenten aufteilen und Sie können das JQ-Framework verwenden, um es weiter zu implementieren bequem (JQ Practice) usw.

Das Obige ist der gesamte Inhalt, der in diesem Artikel mit Ihnen geteilt wird. Ich hoffe, dass er Ihnen gefällt.