Da ich angefangen habe, das Front-End zu lernen, sehe ich normalerweise einige herausragende Steuerelemente für den Browser, den ich von mir selbst implementieren möchte. Ich frage mich, ob Sie dieses Gefühl haben. Als nächstes werde ich mit Ihnen einen teilen. Die ursprüngliche Kontrolle kommt von unten rechts von der Baidu -Übersetzung. Sie können es sorgfältig finden, wie in der Abbildung gezeigt:
Es fühlt sich sehr interessant an, nicht kompliziert und eignet sich besser zum Üben. Ok, lass uns nicht viel reden, lade einfach den Code hoch.
HTML -Code:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = 'utf-8'/>
<title> Zoom </title>
<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>
</body>
</html>
CSS -Code:
Die Codekopie lautet wie folgt:
*{{
Rand: 0px;
Polsterung: 0px;
}
#Zoom{
Position: absolut;
Top: 20px;
Rechts: 200px;
Grenze: 1PX Solid 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);
Hintergrundrepeat: No-Repeat;
Hintergrundposition: -5px -7px;
Deckkraft: 0,8;
Filter: Alpha (Opazität = 50);/*IE78*/
}
#zoom ul {
Anzeige: Keine;
Position: absolut;
Oben: 0px;
unten: 0px;
links: 50px;
Listenstil: Keine;
}
#zoom ul li {
Anzeige: Inline-Block;
*Anzeige: Inline;/*IE7*/
*Zoom: 1;/*IE7*/
*Margin-Links: 5px;/*IE7*//
Breite: 16px;
Höhe: 16px;
Rand: 12px;
Hintergrundbild: URL (Sprite.png);
Hintergrundrepeat: No-Repeat;
}
#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 (Opazität = 50);/*IE78*/
}
#zoom span: hover {
Cursor: Zeiger;
Deckkraft: 1;
Filter: Alpha (Opazität = 100);/*IE78*/
}
JS -Code:
Die Codekopie lautet wie folgt:
var zoom = (function () {
var zoomdom = document.getElementById ('zoom'),
state = {geöffnet: false, onaction: false, Länge: 0},
Showspan,
ul;
if (zoomdom.firstelementChild) {
showSpan = zoomdom.firstelementChild;
ul = showSpan.NextElementSibling;
} else { /*ie* / /
ShowSpan = Zoomdom.Firstchild;
ul = showSpan.nextsibling;
}
/*IE78-kompatible Registrierungsveranstaltungsmethode*/
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 Standard-Ereignis-Blockierungsmethode*/
var stopdefault = function (e) {
if (e && e.preventDefault) {
E.PreventDefault ();
} anders {
window.event.returnValue = false;/*dh*/
}
};
/*Steuerung erweitern*/
var onopen = function () {
if (state.length> 250) {
ul.style.display = 'Inline-Block';
state.onaction = false; state.opeed = true;
}anders{
if (! state.onaction) {state.onaction = true;}
Status.Length += 10;
Zoomdom.Style.width = state.length + 'px';
setTimeout (Onopen, 0)
}
};
/*Schließen Sie die Kontrolle*///
var onCollapse = function () {
if (state.length <41) {
state.onaction = false; state.opeed = false;
}anders{
if (! state.onaction) {state.onaction = true;}
Status.Length -= 10;
Zoomdom.Style.width = state.length + 'px';
setTimeout (OnCollapse, 0);
}
};
/*Klicken Sie auf den Rückruf der Trigger -Schaltfläche*/
var onspanclick = function (e) {
stopdefault (e);
if (! state.onaction) {
if (! state.opeed) {
onopen ();
}anders{
ul.style.display = 'none';
OnCollapse ();
}
}
};
return function () {
AddEvent (ShowSpan, 'Click', Onspanclick);
};
}) ();
Das folgende Bild ist das in CSS verwendete Bild (Bild ^ _ ^ direkt aus Baidu -Übersetzung):
Jeder, ändern Sie einfach den Namen und legen Sie ihn in das Root -Verzeichnis oder stellen Sie direkt zwei Stellen in das CSS ein:
Die Codekopie lautet wie folgt:
Hintergrundbild: URL (Sprite.png);
Wechsel zu:
Die Codekopie lautet wie folgt:
Hintergrund-image: URL (http://images.cnitblog.com/blog2015/680599/201503/110916459332808.png);
Es ist auch in Ordnung, die Bildressource zu verwenden, die ich direkt hochgeladen habe (dank des leistungsstarken Internet^_^).
Als nächstes ist der Effekt, den ich erreicht habe:
Sprechen wir über meine wichtigsten technischen Punkte während des Schreibprozesses:
Die Kontrolle ist mit IE7 kompatibel, und es gibt keinen IE6 zur Hand, daher kann es nicht getestet werden. Die wichtigsten Kompatibilitätsprobleme sind im Code gekennzeichnet.
Mit dem Einsatz von CSS Sprites -Technologie sollten Sie sie entdecken, eine gute Technologie muss verwendet werden.
Wenden Sie Schließungen in JS an, um die globale Umweltverschmutzung zu vermeiden.
Im HTML -Skript -Tag werde ich dieses kleine Detail auch bemerken (obwohl es sich um alle lokalen Ressourcen () handelt).
Nun, das ist es, aber diese kleine Kontrolle hat immer noch Raum für weitere Verbesserungen. Beispielsweise können Sie das CSS3 -Attribut verwenden, um eine dynamische Skalierung von DIV zu erreichen. Sie können diese Steuerung komponentieren und das JQ -Framework verwenden, um es bequemer (JQ -Praxis) usw. zu implementieren.
Das obige ist der gesamte Inhalt, der in diesem Artikel geteilt wird. Ich hoffe, es gefällt Ihnen.