JS verwendet Arrays, um Bildschaltereffekte für Ihre Referenz zu erstellen. Der spezifische Inhalt ist wie folgt
Array -Elementpositionstransformation:
Teilen Sie den Inhalt in ein Array auf, fügen Sie den ersten zum Ende hinzu und löschen Sie den ersten
<div id = "box"> 1,2,3,4 </div> <input type = "button" value = 'switch' id = 'input'> <skript> Fenster.onload = function () {var odiv = document.getElementById ('box'); var oinput = document.getElementById ('Eingabe'); oinput.onclick = function () {var arr = odiv.innerhtml.split (','); // console.log (arr); arr.push (arr [0]); // Fügen Sie den ersten zum Ende hinzu und löschen Sie den ersten arr.shift (); odiv.innerhtml = arr; }} </script>Simulationsbild -Switching -Effekt:
window.onload = function () {var adiv = document.getElementsByTagName ('div'); var Ainput = document.getElementsByTagName ('input'); var arr=[];//Create an empty array to store attributes for(var i=0;i<aDiv.length;i++){ console.dir(getStyle(aDiv[i],'left'));//Get the pure final style//Add attributes as conforming arrays to arr, which can be used for multi-attribute arr.push ([getStyle (adiv [i], 'links'), GetStyle (adiv [i], 'top')]); } // console.dir (arr); Ainput [0] .onclick = function () {// Fügen Sie den ersten zum Ende hin und löschen Sie den ersten arr.push (arr [0]); arr.shift (); für (var i = 0; i <adiv.Length; i ++) {// Nach dem Betrieb des Arrays geben Sie adiv [i] .Style.left = arr [i] [0] zuzuweisen; adiv [i] .style.top = arr [i] [1]; }}; AInput [1] .onclick = function () {// die letzte vorne hinzufügen und die letzte arr.unshift löschen (arr.Length-1]); arr.pop (); für (var i = 0; i <adiv.length; i ++) {adiv [i] .Style.left = arr [i] [0]; adiv [i] .style.top = arr [i] [1]; }}; Funktion getStyle (obj, attr) {// den endgültigen Stil erhalten, wenn (obj.currentStyle) {return obj.currentStyle [attr]; } else {return getComputedStyle (obj, false) [attr]; }}}Einfache Renderings:
Beispielversion:
Ideen:
Wenn es fünf Bilder gibt: Die linken Werte der Abbildungen 1 bis 5 sind: 20px, 60px, 100px, 240px und 380px;
Nach dem Klicken auf die Schaltfläche Links werden die entsprechenden Werte von Abbildung 1 bis 5 links: 60px, 100px, 240px, 380px, 20px;
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Es entspricht dem Verschieben des ersten Elements dieses Array -Satzes bis zum Ende: 20px, 60px, 100px, 240px, 380px, 20px;
Löschen Sie dann das erste Element auf: 60px, 100px, 240px, 380px, 20px;
Und so weiter:
Beispiellayout:
<div id = "box"> <ul> <li class = 'pos_0'> <img src = "bilder/1.png" width = '300'> </li> <li class = 'pos_1'> <img src = "bilder/1.jpg" width = '400'> </li> <li class = 'pos_2'> <imgc = "bilder". width='500'></li> <li class='pos_3'><img src="images/3.jpg" width='400'></li> <li class='pos_4'><img src="images/1.jpg" width='300'></li> </ul> <span class='dir dirl'></span> <span class='dir DIRR '> </span> </div>
Beispielstil:
#box {width: 700px; Höhe: 300px; Position: relativ; Margin: 20px Auto; li.pos_1 {top: 20px; links: 60px; z-Index: 2; Opazität: 0.8;}#Box ul li.pos_2 {top: 0px; links: 100px; z-Index: 3; Opazität: 1;}#Box li.pos_3 {obere: 20px; li.pos_4 {top: 50px; links: 380px; z-Index: 1; Opazität: 0,5;}. Dir {Anzeige: Inline-Block; Breite: 45px; Höhe: 100px; Hintergrund: url ('Bilder/Button.png') no-repeat: absolut; top: 60px; z-Index: 4; 0; links: 40px;}. Dirr {Hintergrundposition: -55px 0; rechts: 40px;}JS -Code:
window.onload = function () {var Opre = document.getElementsByClassName ('dir') [0]; var onext = document.getElementsByClassName ('Dir') [1]; var ali = document.getElementsByTagName ('li'); var arr = []; für (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .getElementsByTagName ('img') [0]; // console.log (getStyle (Ali [i], 'links')); // console.log (parseInt (getStyle (ali [i], 'opacity')*100)); // console.log (getStyle (ali [i], 'z-Index'); // console.log (oimg.width); arr.push ([parseInt (getStyle (ali [i], 'top'), parseInt (getStyle (ali [i], 'opazität')*100), ParseInt (getStyle (ali [i], 'z-Index'), oimg.width]); // console.log (arr [i] [2]); } // console.dir (arr); Opre.onclick = function () {// links arr.push (arr [0]); arr.shift (); für (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .getElementsByTagName ('img') [0]; //console.log(aR -· i]] 02]); startMove (ali [i], {links: arr [i] [0], oben: arr [i] [1], Opazität: arr [i] [2],}); Ali [i] .Style.zindex = arr [i] [3]; startMove (oimg, {width: arr [i] [4]}); }}; Onext.onclick = function () {// rechte arr.unshift (arr.length-1]); arr.pop (); für (var i = 0; i <ali.length; i ++) {var oimg = ali [i] .getElementsByTagName ('img') [0]; startMove (ali [i], {links: arr [i] [0], oben: arr [i] [1], Opazität: arr [i] [2],}); Ali [i] .Style.zindex = arr [i] [3]; startMove (oimg, {width: arr [i] [4]}); }}; Funktion getStyle (obj, attr) {// Erhalten Sie den Wert der Einheit if (obj.currentStyle) {return obj.currentStyle [attr]; } else {return getComputedStyle (obj, false) [attr]; }}}Reproduktionsbild:
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.