Ich habe in letzter Zeit nicht aktualisiert, also füge ich nur ein paar Effekte hinzu, um es zu bereichern.
Keiner von ihnen verschönert diesen Schritt.
Reines CSS -Akkordeon:
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <titels> Akkordeon CSS </title> <style> .showbox {width: 660px; Überlauf: versteckt; } ul {Listenstil: Keine; Rand: 0; Polsterung: 0; Breite: 30000px; } ul li {float: links; Position: Relativ; Höhe: 254px; Breite: 110px; Überlauf: versteckt; Übergang: alle 0,3s; } /*Dies ist der Kern des CSS-Akkordeons, das die Verwendung von Hover ** Erstens ist, ul: schwebe li wechsler, die UL, aber nicht durch ul ** dann ul li: schwebe hier sind die Änderungen, die durch Lib überschritten wurden, und das Animationseffekte von CSS3 und einige CSS3-Aufenthaltsauswirkungen auf Seiteverschönerung, du kannst einen guten Looking-Akkord machen. Wenn Sie eine reine JS -Implementierung verwenden, kann dies problematisch sein. */ ul: Hover li {Breite: 22px; } ul li: hover {width: 460px; } ul li img {width: 550px; Höhe: 254px; } ul li span {width: 22px; Position: absolut; Top: 0; Rechts: 0; Höhe: 204px; Padding-Top: 50px; Farbe: #fff; } ul li span.bg1 {Hintergrund: #333; } ul li span.bg2 {Hintergrund: #0f0; } ul li span.bg3 {Hintergrund: #ff7500; } ul li span.bg4 {Hintergrund: #0ff; } ul li span.bg5 {Hintergrund: #00f; } </style> <script type = "text/javaScript"> </script> </head> <body> <ul> <li> <span> Dies ist der erste </span> <img src = "1.jpg"> </li> <li> <span> Dies ist das zweite </ling. src="3.jpg"></li> <li><span>This is the fourth</span><img src="4.jpg"></li> <li><span>This is the fifth</span><img src="5.jpg"></li> </ul> </div></body></html>CSS3 Akkordeon:
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <titels> css3-überprüft: </title> <style>/* Verwenden Sie die Einzel-Choice-Funktion von Radio, um den Akkordeffekt*/ul {display: None; } input {display: keine;} label {display: block; Zeilenhöhe: 40px; Border-Bottom: 1PX Solid #ddd; Cursor: Zeiger; Schriftgröße: 15px; Schriftgewicht: BOLD;} .List> ul {display: Keine; -Webkit-Übergang: Alle .5s linear; -moz-Übergang: alle .5s linear; -MS-Übergang: alle .5s linear; -O-Übergang: alle .5s linear; Übergang: Alle .5s linear;} #list1: geprüft + ul {display: block;} #list2: geprüft + ul {display: block;} #list3: geprüft + ul {display: block;} #list4: uhred + ul {display: block;} </style> </head> <body> <body> <div> <div> <div> <div> <div> <darly ". name = "list" id = "list1" checked = "thekced"/> <ul> <li> <a href = ""> Klassenmate -Name </a> </li> <li> <a href = ""> Klassenmate -Name </a> </li> <li> <a href = "> klassenmatenname </a> </li> </li> </li> <a href ="> klassenmate </a> </li> </li> </li> </li> <a href = "> klassenmate </a> </li> </li> </li> </li> </li> <a href ="> klassenmate Name </a> </li> <li> <a href = ""> Klassenmate -Name </a> </li> <li> <a href = ""> Klassenmate -Name </a> </li> <li> <a href = "" href = ""> Klassenmate -Name </a> </li> <li> <a href = ""> Klassenmate -Name </a> </li> <li> <a href = ""> Klassenmate -Name </a> </li> <li> <a href = "" <li> <a href = ""> Klassenkameras Name </a> </li> <li> <a href = ""> Klassenmatsche Name </a> </li> <li> <a href = ""> Klassenmatsche Name </a> </li> </ul> <Label für = "List3"> My ClassMate </label </label </label </label </label </label </label. <ul> <li> <a href = ""> Klassenkamerame </a> </li> <li> <a href = ""> Classmates Name </a> </li> <li> <a href = ""> Classmates Name des Klassenkameradens </a> </li> <a> <a href = " href = ""> Klassenmatsche Name </a> </li> <li> <a href = ""> klassenmates Name </a> </li> <li> <a href = ""> Klassenkameraden Name </a> </li> </ul> <Label für = "LIST4" LIST4 "> MY CLASSMATE </> </</</<Plades" </</<Plades ". <li><a href="">Classmate</a></li> <li><a href="">Classmate</a></li> <li><a href="">Classmate</a></li> <li><a href="">Classmate</a></li> <li><a href="">Classmate</a></li> </div> </body> </html>Akkordeon durch JavaScript implementiert:
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> Akkordeon </title> <style> .showbox {width: 660px; Überlauf: versteckt; } ul {Listenstil: Keine; Rand: 0; Polsterung: 0; Breite: 30000px; } ul li.active {width: 550px; } ul li {float: links; Position: Relativ; Höhe: 254px; Breite: 22px; Überlauf: versteckt; } ul li img {width: 660px; Höhe: 254px; } ul li span {width: 22px; Position: absolut; Top: 0; links: 0; Höhe: 204px; Padding-Top: 50px; } ul li span.bg1 {Hintergrund: #333; } ul li span.bg2 {Hintergrund: #0f0; } ul li span.bg3 {Hintergrund: #ff7500; } ul li span.bg4 {Hintergrund: #0ff; } ul li span.bg5 {Hintergrund: #00f; } </style> <script type = "text/javaScript"> window.onload = function () {createAcordion ('. showBox'); }; Funktion createAcCordion (Name) { /*Element erhalten* / var odiv = document.querySelector (Name); /*Mindestens Breite deklarieren*/ var iminwidth = 9999999; /*Element erhalten*/ var ali = odiv.getElementsByTagName ('li'); var Aspan = odiv.getElementsByTagName ('span'); /*Timer Container Standard*/ odiv.timer = null; /*Schleife Ereignis und benutzerdefinierte Attributindexwert addieren*/ for (vari = 0; i <Aspan.length; i ++) {Aspan [i] .Index = i; Aspan [i] .onmouseover = function () {gotoimg (odiv, this.index, iminwidth); }; /*Holen Sie sich die minimale Breite*/ iminwidth = math.min (iminwidth, ali [i] .Offsetwidth); }}; Funktion gotoimg (odiv, iIndex, iMinwidth) {if (odiv.timer) { /*den Timer löschen, um Overlay* / ClearInterval (odiv.timer) zu vermeiden; } /*Den Timer öffnen* / odiv.timer = setInterval (function () {ChangeWidthinner (odiv, iIndex, iMinwidth);}, 30); } /*Dies ist der Schlüssel, Bewegung* / Funktion ChangeWidhmashins (Odiv, iIndex, Iminwidth) {var ali = odiv.getElementsByTagName ('li'); var Aspan = odiv.getElementsByTagName ('span'); /*Holen Sie sich die Größe der Box, dies ist die Gesamtbreite*/ var iwidth = odiv.offsetwidth; /*Die Breite der eingerksamen Bild*/ var w = 0; /*Urteilserklärung, um die Timer -Deklaration zu löschen*/ var bend = true; /*Schleifen Sie, um jedes Bild zu schleifen, um die erweiterten Elemente zu erhalten*/ für (var i = 0; i <ali.length; i ++) {/*Dies soll den erweiterten Index*/ if (i == idex) {Fortsetzung; } /*Es gibt Elemente, die keine Änderungen haben. Daher wird die minimale Breite gespeichert weitermachen; } /*Der Code in der folgenden Schleife ist die reduzierten Elemente* / /*Löschen Sie den Timer nicht und es ist nicht beendet, wenn er trainiert* / bend = false; / *Geschwindigkeit erhalten, zuerst schnell und dann langsam */speed = math.ceil ((ali [i] .offsetwidth-iminwidth)/10); /*Reduzieren Sie die verbleibende Breite*/ w = ali [i] .Offsetwidth-Speed; /*Um zu vermeiden, dass das schrumpfende Element geringer ist als die minimale Breite*/ if (w <= iminwidth) {w = iminwidth; } /*Setzen Sie die Breite des schrumpfenden Elements* / ali [i] .style.width = w+'px'; /*Subtrahieren Sie die schrumpfende Breite, die verbleibende Breite ist die erweiterte Breite*/ iwidth- = w; } /*Breite des erweiterten Elements* / ali [iIndex] .style.width = iwidth+'px'; if (Bend) {ClearInterval (odiv.timer); odiv.timer = null; } } </script></head><body> <div> <ul> <li><span> This is the first</span><img src="1.jpg"></li> <li><span> This is the second</span><img src="2.jpeg"></li> <li><span> This is the third</span><img src="3.jpg"></li> <li> <span> Dies ist der vierte </span> <img src = "4.jpg"> </li> <li> <span> Dies ist der fünfte </span> <img src = "5.jpg"> </li> </ul> </div> </body> </html> </ul> </div> </body> </html>Das nächste ist, Animationseffekte zu verwenden, um die Bewegung zu verkörpern:
/*Verwenden Sie Anrufe, OBJ -Objekt, Attribut, Geschwindigkeitsgeschwindigkeit, den Wert, den Itarget erreichen möchte, FN Callback -Funktion*//*, da Bewegungen im Grunde genommen in PX -Einheiten liegen, wie für Transparenz, es gibt keine Einheit, also trenne ich es hier. Tatsächlich habe ich es nicht viel geändert, nur beurteilen, ob es sich um das Transparenzattribut handelt, und dann zur Transparenzlinie*/ Funktion Domove (OBJ, Attr, Geschwindigkeit, Itarget, fn) {if (attr == "opacity") {obj.len = itarget-parsefloat (Getstyle (obj "))*100; } else {obj.len = itarget-parsefloat (getStyle (obj, "opazität")); } /*Die Richtung hier wird beurteilt. Der nach dem Anfangspunkt ist negativ und der vor dem Anfangspunkt positiv*/ speed = obj.len> 0? Geschwindigkeit: -geschwindige; ClearInterval (obj.timer); obj.timer = setInterval (function () {if (! obj.num) {obj.num = 0;} if (attr == "opazität") {obj.num = parsefloat (GetStyle (GetStyle (OBJ, Attr))*100+Geschwindigkeit;} sonst {nenne. erreicht den Timer, wenn es angekommen ist*/ if (obj.num> = itarget && obj.len> 0 || obj.num <= itarget && obj.len <0) {obj.num = itarget; obj.style [attr] = obj.num+"px"; } /*Wenn Sie den CSS -Attributwert erhalten, erhalten Sie den Wert der Leistung* / Funktion getStyle (obj, attr) {return obj.currentStyle? Obj.currentStyle [attr]: getComputedStyle (OBJ) [Attr]; }Karussellbild:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Carousel diagram</title> <!-- This is a reference to encapsulated motion function --> <script type="text/javascript" src="doMove.js"></script> <script type="text/javascript"> window.onload=function(){ /*Anruf zur Implementierung von Carousel* / Carousel ("Carousel")} Funktion Carousel (Name) {var oscl = document.getElementById (Name); var Oul = oscl.querySelector ("ul"); var ali = Oul.querySelectorAll ("li"); var next = document.getElementById ("next"); var pre = document.getElementById ("pre"); var aindex = oscl.querySelectorAll (". Indexspan"); var num = 0; var index = 0; /*Geben Sie die höchste Ebene des ersten Bildes an*/ ali [0] .Style.zindex = 5; /*Beurteilen Sie, ob der Timer existiert*/ if (! Oscl.timer) {oscl.timer = null; } /*Dies ist automatisch Karussell auf* / oscl.timer = setInterval (function () {num ++; num%= ali.Length; play ();}, 2000); /*Auf den oberen und unteren Seiten anzeigen und ausblenden*/ oscl.onmouseover = function () {/*In Stop Timer*/ ClearInterval (OSCL.Timer) bewegen; Next.Style.display = "Block"; pre.style.display = "block"; } oscl.onmouseout = function () {next.style.display = "Keine"; pre.style.display = "keine"; /*Ausziehen auf dem Timer*/ oscl.timer = setInterval (function () {num ++; num%= ali.length; play ();}, 2000); } /*Klicken Sie auf die vorherige und nächste Seite* / next.onclick = function () {num ++; Num%= ali.länge; spielen(); } pre.onclick = function () {if (! ali [index]) {index = num; } num--; if (num <0) {num = ali.length-1; } spielen(); } /*Indexpunkt* / for (var i = 0; i <aindex.length; i ++) {aindex [i] .Index = i; aIndex [i] .onmouseover = function () {num = this.index; spielen(); }} /*Animationsausführungsfunktion* /function play () { /*Bestimmen Sie nur, ob es sich um denselben Auslöserspunkt handelt, wie z. B. die beiden Bewegungen des Indexpunkts sind gleich. Wenn es nicht ausgeführt wird, vermeiden Sie die wiederholte Ausführung kontinuierlich*/ if (index! } /*Setzen Sie die Ebene des letzten Karussells auf 2* / ali [Index] .Style.zindex = 2; AIndex [Index] .ClassName = ""; aIndex [num] .classname = "active"; Index = num; /*Stellen Sie die Transparenz der Abbildung dieses Karussells auf 0*/ ali [num] .Style.opacity = 0; /*Setzen Sie die Ebene der Figur, die ein Karussell auf 5*/ ali ist [num] .Style.zindex = 5; /*Bewegungsfunktionskapselung, aus diesem Bild ausgehen*/ Domove (Ali [num], "Deckkraft", 10.100); }}} </script> <style> a {textdekoration: keine; Farbe: #555; } #Carousel {Schriftfamilie: "Microsoft Yahei"; Position: Relativ; Breite: 800px; Höhe: 400px; Rand: 0 Auto; } #Carousel ul {Listenstil: Keine; Rand: 0; Polsterung: 0; Position: Relativ; } #Carousel ul li {Position: absolut; Z-Index: 1; Top: 0; links: 0; } .imgbox img {width: 800px; Höhe: 400px; } .BTN {Position: absolut; Z-Index: 10; Top: 50%; Breite: 45px; Höhe: 62px; Rand: -31px; Text-Align: Mitte; Zeilenhöhe: 62px; Schriftgröße: 40px; Hintergrund: RGBA (0,0,0,0,4); Opazität: Alpha (Deckkraft = 50); Anzeige: Keine; } #pre {links: 0; } #next {rechts: 0; } #Carousel .Index {Position: absolut; unten: 10px; Links: 50%; Z-Index: 10; } #Carousel .Index span {width: 15px; Höhe: 15px; Grenzradius: 50%; Hintergrund: #87cefa; Anzeige: Inline-Block; Box-Shadow: 1PX 1PX 6PX #4169E1; } #Carousel .Index span.active {Hintergrund: #4169e1; Box-Shadow: 1PX 1PX 6PX #87CEFA INSET; } </style></head><body> <div id="carousel"> <ul> <li><a href="#"><img src="1.jpg"></a></li> <li><a href="#"><img src="2.jpg"></a></li> <li><a href="#"><img src = "2.jpg"> </a> </li> <li> <a href = "#"> <img src = "3.jpg"> </a> </li> <li> <a href = "#"> <img src = "4.jpg"> </a> </li> <li> <li> <a href src = "5.jpg"> </a> </li> </ul> <a href = "JavaScript:;" id = "next" >> </a> <a href = "JavaScript:;" id = "pre"> <</a> <div> <span> </span> <span> </span> <span> <span> </span> <span> </span> </span> <span> </div> </div> </body> </html>Dies geschieht mit Plugin: responsivesSlides.js
Basierend auf JQuery
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> document </title> <!-Einführung von Plugins JS und JQuery-> <script src = "jQuery.0.3.js"> </script #src = "reaktionses.js.js.js" relativ; Breite: 800px; } /* Das Standard -CSS -Attribut des Plugins* / .rslides {Position: Relativ; Listenstil: Keine; Überlauf: versteckt; Breite: 100%; Polsterung: 0; Rand: 0; } .rslides li {-webkit-backface-Sicht: versteckt; Position: absolut; Anzeige: Keine; Breite: 100%; links: 0; Top: 0; } .rslides li: First-Kind {Position: Relativ; Anzeige: Block; float: links; } .rslides img {display: block; Höhe: Auto; float: links; Breite: 100%; Grenze: 0; } /*, modifiziert, modifiziert an DOT -Taste* / ul.rslides_tabs.rslides1_tabs {Position: Absolute; unten: 10px; Links: 45%; Listenstil: Keine; Z-Index: 10; } ul.rslides_tabs.rslides1_tabs li {float: links; } ul.rslides_tabs.rslides1_tabs li a {display: block; Grenzradius: 50%; Breite: 10px; Höhe: 10px; Rand-Rechts: 10px; Hintergrund: #fff; } / * .rslides_here Dies ist äquivalent zu aktiv * / ul.rslides_tabs.rslides1_tabs li.rslides_here a {Hintergrund: #004f88; } /* Klassenname der linken und rechten Schaltflächen* / .rslides_nav.rslides1_nav {Position: Absolute; Top: 50%; Farbe: #eee; Schriftgröße: 40px; Textdekoration: Keine; Z-Index: 4; } .rslides_nav.rslides1_nav.pre {links: 10px; } .rslides_nav.rslides1_nav.Next {rechts: 10px; } .rslides img {Höhe: 400px; } </style> <script> $ (function () {$ (". RSlides"). ResponsivesSlides ({Pager: True, // Standard ist falsch, wenn angezeigt wird (True), wird der Indexpunkt angezeigt. Der Standardwert ist die Nummer 12345. PAUSECONTROLS: TRUE, // Boolean: Pause Wenn schwebende Kontrollen, wahre oder falsche Prävtext: "<", // die Symbole der linken und rechten Schaltflächen NextText: ">", // String: Text für die "nächste" Taste "Maxwidth": "800px"}); $ ("#banner"). mouseover (function () {$ (". RSlides1_Nav"). </script> </head> <body> <!-Verwenden Sie ein Div, um es zu wickeln, und diese von JS hinzugefügten Tags werden direkt hinter dem UL-Tag geladen-> <div id = "banner"> <ul id = "rslides"> <li> <img src = "111.jpg"> </li> <img Src = "222.jpg"> </li> <img src = " src = "333.jpg"> </li> <li> <img src = "444.jpg"> </li> <li> <img src = "555.jpg"> </li> </ul> </div> </body> </html>Bild Folie:
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> Image Slide </title> <style> .Container {Position: Relativ; Breite: 630px; Grenze: 2PX Solid #888; Polsterung: 5px; } .c-wrap {width: 630px; Überlauf: versteckt; } .Container img {width: 200px; Höhe: 90px; } .Container ul {Listenstil: Keine; Rand: 0; Polsterung: 0; } .Container ul li {float: links; Rand-Rechts: 10px; } .Container .imgBigbox {width: 33000px; Rand-Links: 0px; } .imgBigbox: After {Inhalt: ""; Anzeige: Block; klar: beides; } .BTNGroup {Border: 1PX Solid #888; Breite: 65px; } .BTNGROUP A {text-align: center; Zeilenhöhe: 20px; Textdekoration: Keine; Farbe: #888; Schriftgröße: 20px; Anzeige: Inline-Block; Breite: 30px; } .BTN1 {Margin-Right: 4px; Grenzrechte: 1PX Solid #888; } </style> <!-Bewegungsfunktion zitieren-> <script type = "text/javaScript" src = "domove.js"> </script> <script type = "text/javaScript"> window.onload = function () {/*Funktionsfunktion, um das Schieben zu erreichen*/Slide (".". Container "); } function Slide (Name) {var ocontainer = document.querySelector (Name); var oimgbigbox = ocontainer.querySelector (". imgBigbox"); var abtn = ocontainer.querySelectorAll (". Btngroup a"); var oc_wrap = ocontainer.querySelector (". c-wrap"); /*Holen Sie sich die Gleitbreite*/ var w = oc_wrap.offsetwidth; /*Klicken Sie auf die Schaltfläche links*/ abtn [0] .onclick = function () {domove (oimgBigbox, "marginleft", 10, -w, function () {var child = oimgBigbox.Children [0] .Clonenode (true); oimgbigbox.removechild (oimgbigbox.children [0]); oimgbigbox.insertBefore (oimgbigbox.Children [1], oimgbigbox.Children [0]); oimgbigbox.Style.Marginleft = -W+"px"; Domove (oimgbigbox, "marginleft", 10,0)}} </script> </head> <body> <div> <div> <div> <ul> <li> <img src = "1.JPG"> </li> <li> <img Src = "2.jpg"> </li> </li> <IMG Src <li> <img src = "4.jpg"> </li> <li> <img src = "5.jpg"> </li> <li> <img src = "6.jpg"> </li> </ul> </div> </div> <a href = "javascript:;"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.