JavaScript-Implementierung, Baidu-Übersetzung, zusammenklappbare Schaltfläche zum Teilen, Liste

JavaScript-Implementierung, Baidu-Übersetzung, zusammenklappbare Schaltfläche zum Teilen, Liste_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 16:10:03

Original

1271 Leute haben es durchsucht

Seit ich angefangen habe, Frontend zu lernen, möchte ich O(∩_∩)O normalerweise selbst implementieren, wenn ich einige herausragende Steuerelemente im Browser sehe. Ich frage mich, ob Sie so denken. Als nächstes werde ich eines mit Ihnen teilen. Das ursprüngliche Steuerelement stammt aus der unteren rechten Ecke von Baidu Translate. Sie sollten es finden können, wenn Sie sorgfältig suchen, wie im Bild gezeigt:

Es fühlt sich sehr interessant an und ist nicht kompliziert in der Umsetzung, daher eignet es sich eher zum Üben. Okay, kein Unsinn mehr, kommen wir direkt zum Code.

HTML-Code:

Code kopieren Der Code lautet wie folgt:

Seenfer

& Lt; li tity = "ricker network" class = "li4" & lt;/li & gt;

& Lt; li title = "happy network" class = "li8" & lt;/li & gt;

CSS-Code:

Code kopieren

Der Code lautet wie folgt:

*{
margin:0px;
padding:0px;
}
#zoom{
Position: absolut;
oben: 20px;
rechts: 200px;
Rand: 1 Pixel einfarbiges RGB (38.147.255);
Höhe: 40px;
Breite: 40px;
}
#zoom > span{
Anzeige: inline-block;
Position: absolut;
oben: 0px;
unten: 0px;
links: 0px;
Breite: 40px;
Hintergrundbild: url(sprite.png);
Hintergrundwiederholung: keine Wiederholung;
Hintergrundposition: -5px -7px;
Deckkraft: 0,8;
filter:Alpha(opacity=50);/*IE78*/
}
#zoom ul{
Anzeige: keine;
Position: absolut;
oben: 0px;
unten: 0px;
links: 50px;
Listenstil: keiner;
}
#zoom ul li{
Anzeige: inline-block;
*display: inline;/*IE7*/
*zoom:1;/*IE7*/
*margin-left: 5px;/*IE7*/
Breite: 16px;
Höhe: 16px;
Rand oben: 12px;
Hintergrundbild: url(sprite.png);
Hintergrundwiederholung: keine Wiederholung;
}
#zoom .li1{
Hintergrundposition: -57px -20px;
}
#zoom .li2{
Hintergrundposition: -77px -20px;
}
#zoom .li3{
Hintergrundposition: -98px -20px;
}
#zoom .li4{
Hintergrundposition: -119px -20px;
}
#zoom .li5{
Hintergrundposition: -140px -20px;
}
#zoom .li6{
Hintergrundposition: -161px -20px;
}
#zoom .li7{
Hintergrundposition: -182px -20px;
}
#zoom .li8{
Hintergrundposition: -203px -20px;
}

#zoom li:hover{
Cursor: Zeiger;
Deckkraft: 0,8;
filter:Alpha(opacity=50);/*IE78*/
}
#zoom span:hover{
Cursor: Zeiger;
Deckkraft: 1;
filter:Alpha(opacity=100);/*IE78*/
}

js代码：

复制代码代码如下:

var zoom = (function(){

var zoomDom = document.getElementById('zoom'),

        state = {opened: false, onaction: false, length: 0},

showSpan,

       ul;

if (zoomDom.firstElementChild) {

ShowSpan = zoomDom.firstElementChild;

ul = showSpan.nextElementSibling;

}else{ /*IE*/

ShowSpan = zoomDom.firstChild;

ul = showSpan.nextSibling;

}

/*Registrierungsereignismethode kompatibel mit IE78*/

var addEvent = function(el, eventType, eventHandler){

If(el.addEventListener){

       el.addEventListener(eventType, eventHandler,false);

} else if(el.attachEvent){

​​ el.attachEvent('on' eventType, eventHandler);/*IE78*/

}

};

/* IE-kompatible blockierende Standardereignismethode*/

var stopDefault = function(e){

If(e&&e.preventDefault){

e.preventDefault();

} sonst {

        window.event.returnValue = false;/*IE*/

}

};

/*Kontrolle erweitern*/

var onOpen = function(){

If(state.length>250){

​​ ul.style.display = 'inline-block';

       state.onaction = false; state.opened = true;

}else{

If(!state.onaction){ state.onaction = true;} 

       state.length = 10;

zoomDom.style.width = state.length 'px';

setTimeout(onOpen, 0)

}

};

/*Kontrolle schließen*/

var onCollapse = function(){

If(state.length<41){

        state.onaction = false; state.opened = false;

}else{

If(!state.onaction){ state.onaction = true;} 

       state.length -= 10;

zoomDom.style.width = state.length 'px';

​​​ setTimeout(onCollapse, 0);

} 

};

/*Rückruf beim Klicken auf die Auslöseschaltfläche*/

var onSpanClick = function(e){

StopDefault(e);

If(!state.onaction){

If(!state.opened){

onOpen();

}else{

         ul.style.display = 'none';

onCollapse();

}

}

};

Rückgabefunktion(){

​ addEvent(showSpan, 'click', onSpanClick);

};

})();

Das Bild unten ist das in CSS verwendete Bild (Bild direkt aus Baidu Translate^_^):

Laden Sie es herunter, ändern Sie einfach den Namen und legen Sie es im Stammverzeichnis ab oder fügen Sie direkt zwei Stellen im CSS hinzu:

Code kopieren Der Code lautet wie folgt:

Hintergrundbild: url(sprite.png);

geändert in:

Code kopieren Der Code lautet wie folgt:

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

Il est également possible d'utiliser directement la ressource image que j'ai téléchargée (grâce au puissant Internet^_^).

Ce qui suit est une démonstration de l'effet que j'ai obtenu :

Alors laissez-moi parler des principaux points techniques du processus d'écriture :

Le contrôle est compatible avec IE7. Je n'ai pas IE6 sous la main, je ne peux donc pas le tester. Les principaux problèmes de compatibilité à résoudre sont marqués dans le code.
Il utilise la technologie des sprites CSS, vous devriez l'avoir déjà découvert ^_^, une bonne technologie doit être utilisée.

Appliquez des fermetures dans JS pour éviter la pollution mondiale.

En HTML, la balise script est placée en bas du corps. Je remarquerai aussi ce petit détail (même si ce sont toutes des ressources locales ╮(╯▽╰)╭).
D'accord, c'est tout, mais il y a encore place à l'amélioration de ce petit contrôle. Par exemple, vous pouvez utiliser les attributs CSS3 pour réaliser une mise à l'échelle dynamique des divs, vous pouvez composer ce contrôle et vous pouvez utiliser le framework JQ pour l'implémenter davantage. commodément (JQ Practice) )etc.

Ce qui précède est tout le contenu partagé avec vous dans cet article, j'espère qu'il vous plaira.