Aussage: Die Demo stützt sich auf eine Schulungseinrichtung und ist sehr dankbar für diese Trainingsstruktur. Ohne weiteres werden wir jetzt beginnen, die Produktion der Demo zu ändern.
Zunächst müssen wir im Front-End-Lernprozess Karussellbilder lernen. Um verschiedene Karussellbilder effizienter zu implementieren, wird ein Bewegungsrahmen eingekapselt.
Funktion getStyle (obj, attr) {if (obj.currentStyle) {return obj.currentStyle [attr]; // um den Attributwert unter IE} else {return window.getComputedStyle (obj, null) [attr]; // um den Attributwert unter w3c browser}} zu und zu erhalten (acher) (zeit. ClearInterval (obj.timer); obj.timer = setInterval (function () {var flag = true; var current = 0; für (var attr in json) {if (attr == 'opazity') {current = parseInt (getStyle (obj, attr)*100);} else {current = parseInt (getStyle (obj, attr));};}; Math.ceil (Schritt): Math.Floor (Schritt); + ')'; ClearInterval (obj.timer);Dieses Framework ist mit verschiedenen Browsern kompatibel und ermöglicht die Übergabe von Eigenschaften wie Depazität und Z-Index. Natürlich sind gemeinsame Eigenschaften wie Breite, Höhe, links, rechts wesentlich. Mit diesem Rahmen können Sie großartige Ergebnisse erzielen. Jetzt fangen wir formal an, die Demo zu machen.
Erstens die Produktion von index.html.
<div id = "box"> <ul> <li> </li> <li> </li> <li> </li> </li> <li> </li> </li> </li> <li> </li> </ul> </div>
Die Produktion von index.html ist sehr einfach. Wir werden das Bild als Hintergrundbild von Li in JavaScript einfügen. Danach passen wir den CSS -Stil an.
*{Margin: 0px; Polsterung: 0px; } #box {width: 1300px; Höhe: 400px; Rand: 100px Auto; Überlauf: versteckt; } #box ul {Höhe: 400px; Breite: 1300px; } #box ul li {width: 240px; Höhe: 400px; float: links; Überlauf: versteckt; }Der Code für JavaScript lautet wie folgt:
window.onload = function () {var box = document.getElementById ('box'); var ali = box.children [0] .Children; für (var i = 0; i <ali.length; i ++) {ali [i] .style.backgroundimage = 'url (' + 'Bilder/' + (i + 1) + '.jpg'; Animate (this, {width: 800});Auf diese Weise wird die mit native JS implementierte Bellows Effect -Demo realisiert. Natürlich kann der eingekapselte Animate -Rahmen auch verwendet werden, um Karusseffekte ähnlich wie Netase zu erzielen.
Der obige Artikel ist eine Demo im Bellows-Stil, die ein Sport-Framework (Beispielcode) implementiert und ein Sport-Framework (Beispielcode) zusammenfasst, der der Inhalt ist, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.