Depuis que j'ai commencé à apprendre le front-end, je vois généralement des contrôles exceptionnels sur le navigateur que je veux implémenter O (∩_∩) o par moi-même. Je me demande si vous avez ce sentiment. Ensuite, je partagerai avec vous un. Le contrôle original provient du bas à droite de la traduction de Baidu. Vous pouvez le trouver attentivement, comme le montre la figure:
Il semble assez intéressant, pas compliqué à mettre en œuvre et convient plus à la pratique. Ok, ne parlons pas beaucoup, téléchargez simplement le code.
Code html:
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = 'utf-8' />
<Title> Zoom </TITME>
<link 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"> </ script>
</docy>
</html>
Code CSS:
La copie de code est la suivante:
* {
marge: 0px;
rembourrage: 0px;
}
#zoom{
Position: absolue;
En haut: 20px;
Droite: 200px;
Border: 1px RVB solide (38 147 255);
hauteur: 40px;
Largeur: 40px;
}
#zoom> span {
Affichage: bloc en ligne;
Position: absolue;
En haut: 0px;
En bas: 0px;
gauche: 0px;
Largeur: 40px;
Image d'arrière-plan: URL (sprite.png);
République de fond: sans répétition;
Position d'arrière-plan: -5px -7px;
Opacité: 0,8;
Filtre: alpha (opacité = 50); / * ie78 * /
}
#zoom ul {
Affichage: aucun;
Position: absolue;
En haut: 0px;
En bas: 0px;
Gauche: 50px;
Style de liste: aucun;
}
#zoom ul li {
Affichage: bloc en ligne;
* Affichage: en ligne; / * ie7 * /
* zoom: 1; / * ie7 * /
* marge-gauche: 5px; / * ie7 * /
Largeur: 16px;
hauteur: 16px;
marge: 12px;
Image d'arrière-plan: URL (sprite.png);
République de fond: sans répétition;
}
#zoom .li1 {
Position d'arrière-plan: -57px -20px;
}
#zoom .li2 {
Position d'arrière-plan: -77px -20px;
}
#zoom .li3 {
Position d'arrière-plan: -98px -20px;
}
#zoom .li4 {
Position d'arrière-plan: -119px -20px;
}
#zoom .li5 {
Position d'arrière-plan: -140px -20px;
}
#zoom .li6 {
Position d'arrière-plan: -161px -20px;
}
#zoom .li7 {
Position d'arrière-plan: -182px -20px;
}
#zoom .li8 {
Position d'arrière-plan: -203px -20px;
}
#zoom li: Hover {
curseur: pointeur;
Opacité: 0,8;
Filtre: alpha (opacité = 50); / * ie78 * /
}
#zoom Span: Hover {
curseur: pointeur;
Opacité: 1;
Filtre: alpha (opacité = 100); / * ie78 * /
}
Code js:
La copie de code est la suivante:
var zoom = (function () {
var zoomdom = document.getElementById ('zoom'),
état = {ouvert: false, onaction: false, longueur: 0},
showpan,
ul;
if (zoomdom.firstetementchild) {
showspan = zoomdom.FirstelementChild;
ul = showpan.nextelelementSibling;
} else {/ * ie * /
showspan = zoomdom.firstchild;
ul = showpan.nextsibling;
}
/ * Ie78 Compatible Registration Event Method * /
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 compatible Méthode de blocage des événements par défaut * /
var starchdefault = fonction (e) {
if (e && e.preventdefault) {
E.PreventDefault ();
} autre {
window.event.returnvalue = false; / * ie * /
}
};
/ * Développez le contrôle * /
var onopen = function () {
if (state.length> 250) {
ul.style.display = 'inline-block';
state.onaction = false; state.openned = true;
}autre{
if (! state.onaction) {state.onaction = true;}
state.length + = 10;
zoomdom.style.width = state.length + 'px';
setTimeout (Onopen, 0)
}
};
/ * Fermez le contrôle * /
var oncollapse = function () {
if (state.length <41) {
state.onaction = false; state.openned = false;
}autre{
if (! state.onaction) {state.onaction = true;}
state.length - = 10;
zoomdom.style.width = state.length + 'px';
setTimeout (OnCollapse, 0);
}
};
/ * Cliquez sur le rappel du bouton de déclenchement * /
var onSpanclick = fonction (e) {
Stopdefault (E);
if (! state.onaction) {
if (! State.openned) {
onopen ();
}autre{
ul.style.display = 'Aucun';
onCollapse ();
}
}
};
return function () {
addEvent (showpan, 'click', onSpanclick);
};
}) ();
L'image suivante est l'image utilisée dans CSS (image ^ _ ^ directement à partir de la traduction de Baidu):
Tout le monde, changez simplement le nom et mettez-le dans le répertoire racine, ou mettez directement deux places dans le CSS:
La copie de code est la suivante:
Image d'arrière-plan: URL (sprite.png);
Passer à:
La copie de code est la suivante:
Background-Image: URL (http://images.cnitblog.com/blog2015/680599/201503/110916459332808.png);
Il est également acceptable d'utiliser la ressource d'image que j'ai téléchargée directement (grâce à la puissante Internet ^ _ ^).
Ensuite, l'effet que j'ai atteint:
Parlons de mes principaux points techniques pendant le processus d'écriture:
Le contrôle est compatible avec IE7, et il n'y a pas de IE6 à portée de main, il ne peut donc pas être testé. Les principaux problèmes de compatibilité résolus sont marqués dans le code.
Avec l'utilisation de la technologie CSS Sprites, vous auriez dû le découvrir ^ _ ^, une bonne technologie doit être utilisée.
Appliquer des fermetures en JS pour éviter la pollution mondiale.
Dans la balise de script HTML, je remarquerai également ce petit détail (bien qu'ils soient toutes des ressources locales ()).
Eh bien, c'est tout, mais ce petit contrôle a encore de la place à une amélioration supplémentaire. Par exemple, vous pouvez utiliser l'attribut CSS3 pour atteindre la mise à l'échelle dynamique de Div, vous pouvez composer ce contrôle et utiliser le framework JQ pour l'implémenter plus commodément (JQ Practice), etc.
Ce qui précède est tout le contenu partagé par cet article, j'espère que vous l'aimez.