Je n'ai pas mis à jour récemment, donc je vais simplement ajouter quelques effets pour l'enrichir.
Aucun d'eux n'embellit cette étape.
Accordéon CSS pur:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tapie> Accordion css </title> <style> .showbox {width: 660px; débordement: caché; } ul {list-style: Aucun; marge: 0; rembourrage: 0; Largeur: 30000px; } ul li {float: gauche; Position: relative; hauteur: 254px; Largeur: 110px; débordement: caché; Transition: Tous 0,3S; } / * Ceci est le cœur de l'accordéon CSS, qui est l'utilisation de la survol ** Tout d'abord, UL: Hover Li déclenche des changements qui ont passé par UL mais pas par Ul ** puis UL Li: Hover ici est les changements qui ont été transmis par LIB, correspondant aux effets d'animation de CSS3 et certains effets de CSS3 sur la besenté de la page, vous pouvez faire un bon accordément. Si vous utilisez une implémentation Pure JS, cela peut être gênant. * / ul: Hover li {largeur: 22px; } ul li: hover {largeur: 460px; } ul li img {largeur: 550px; hauteur: 254px; } ul li span {largeur: 22px; Position: absolue; en haut: 0; à droite: 0; hauteur: 204px; Tableau de rembourrage: 50px; Couleur: #FFF; } ul li span.bg1 {background: # 333; } ul li span.bg2 {background: # 0f0; } ul li span.bg3 {background: # ff7500; } ul li span.bg4 {background: # 0ff; } ul li span.bg5 {background: # 00f; } </ style> <script type = "text / javascript"> </ script> </ head> <body> <div> <ul> <li> <span> Ceci est le premier </span> <img src = "1.jpg"> </li> <li> <span> Il s'agit du deuxième </pan> <img src = "2.jpeg"> </li> <li> src = "3.jpg"> </li> <li> <span> Ceci est le quatrième </span> <img src = "4.jpg"> </li> <li> <span> Ceci est le cinquième </span> <img src = "5.jpg"> </li> </ul> </v> </odody> </html>accordéon CSS3:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <itle> CSS3-Checked: </ title> <style> / * Utilisez la fonction de roi-choix de la radio pour réaliser l'effet accordéon * / ul {affiche: aucun; } entrée {affichage: aucun;} label {affiche: bloc; hauteur de ligne: 40px; Border-Bottom: 1px solide #ddd; curseur: pointeur; taille de police: 15px; Font-Weight: Bold;} .List> ul {affichage: aucun; -Webkit-Transition: Tous .5s linéaire; -Moz-Transition: Tous .5s linéaire; -ms-transition: tous .5s linéaire; -o-transition: tous .5s linéaire; Transition: tous .5s linéaire;} # list1: cochée + ul {affichage: bloc;} # list2: coché + ul {affichage: block;} # list3: coché + ul {affichage: block;} # list4: coché + ul {display: block;} </ style> </ head> <body> <v> <label pour "list1"> mon camarade de classe id = "list1" checked = "chekced" /> <ul> <li> <a href = ""> nom de camarade de classe </a> </li> <li> <a href = ""> nom de camarade de classe </a> </li> <li> <a href = ""> nom de camarade de classe </a> href = ""> nom de camarade de classe </a> </li> <li> <a href = ""> nom de camarade de classe </a> </li> <li> <a href = ""> nom de camarade de classe </a> </li> <li> <a href = ""> Nom de classe de classe </a> </li> <li> <a href = ""> Nom de classe de classe </a> href = ""> nom de camarade de classe </a> </li> <li> <a href = ""> nom de camarade de classe </a> </li> <li> <a href = ""> nom de camarade de classe </a> </li> <li> <a href = ""> nom de classe de classe </a> </li> <li> <a href = "" "> Le nom de la camarade de classe </a> href = ""> Nom de la camarade de classe </a> </li> <li> <a href = ""> Nom de la camarade de classe </a> </li> </ul> <label for = "list3"> Mon camarade de classe </ label> <entrée = "radio" name = "list" id = "list3" /> <ul> <li> <a href = ""> Le nom de la camarade de classe </a> href = ""> Nom du camarade de classe </a> </li> <li> <a href = ""> Nom du camarade de classe </a> </li> <li> <a href = ""> Nom de la camarade de classe </a> </li> <li> <a href = ""> Nom de la camarade de classe </a> </ li> <li> <a href = ""> Nom du camarade de classe </a> </li> </ul> <label for = "list4"> Mon camarade de classe </ labe> <entrée type = "radio" name = "list" id = "list4" /> <ul> <li> <a href = ""> Class camate href = ""> camarade de classe </a> </li> <li> <a href = ""> camarade de classe </a> </li> <li> <a href = ""> camarade de classe </a> </li> </div> </ body> </html>Accordéon implémenté par JavaScript:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tight> Accordion </title> <style> .showbox {width: 660px; débordement: caché; } ul {list-style: Aucun; marge: 0; rembourrage: 0; Largeur: 30000px; } ul li.active {largeur: 550px; } ul li {float: gauche; Position: relative; hauteur: 254px; Largeur: 22px; débordement: caché; } ul li img {largeur: 660px; hauteur: 254px; } ul li span {largeur: 22px; Position: absolue; en haut: 0; à gauche: 0; hauteur: 204px; Tableau de rembourrage: 50px; } ul li span.bg1 {background: # 333; } ul li span.bg2 {background: # 0f0; } ul li span.bg3 {background: # ff7500; } ul li span.bg4 {background: # 0ff; } ul li span.bg5 {background: # 00f; } </ style> <script type = "text / javascript"> window.onload = function () {createAccordion ('. showbox'); }; Fonction CreateAccordion (name) {/ * get element * / var odiv = document.QuerySelector (name); / * Déclarer la largeur minimale * / var iminwidth = 9999999; / * get element * / var ali = odiv.getElementsByTagName ('li'); var aspan = odiv.getElementsByTagName ('span'); / * Timer Container par défaut * / odiv.timer = null; / * Loop Ajouter l'événement et la valeur d'index d'attribut personnalisé * / for (vari = 0; i <aspan.length; i ++) {aspan [i] .index = i; aspan [i] .onMouseOver = function () {gotoImg (odiv, this.index, iminwidth); }; / * Obtenez la largeur minimale * / iminwidth = math.min (iminwidth, ali [i] .offsetWidth); }}; fonction gotoImg (odiv, iindex, iminwidth) {if (odiv.timer) {/ * effacer la minuterie pour éviter la superposition * / clearInterval (odiv.timer); } / * Ouvrez le temporisateur * / odiv.timer = setInterval (function () {ChangeWidThinner (odiv, iindex, iminwidth);}, 30); } / * Ceci est la clé, Motion * / fonction changewidthinner (odiv, iindex, iminwidth) {var ali = odiv.getElementsByTagName ('li'); var aspan = odiv.getElementsByTagName ('span'); / * Obtenez la taille de la boîte, il s'agit de la largeur totale * / var iWidth = ODIV.offsetWidth; / * La déclaration de largeur de l'image en retrait * / var w = 0; / * Déclaration de jugement, afin d'effacer la déclaration du temporisateur * / var bend = true; / * Boucle pour faire boucle chaque image, afin d'obtenir les éléments étendus et rétrécis * / for (var i = 0; i <ali.length; i ++) {/ * Ceci est pour obtenir l'index étendu * / if (i == iindex) {continuant; } / * Il y a des éléments qui n'ont pas de modifications, donc la largeur minimale est enregistrée * / if (iminwidth == ali [i] .offsetWidth) {/ * Largeur totale soustrait ces largeurs, car elles sont également dans la largeur totale * / iWidth- = iminwidth; continuer; } / * Le code dans la boucle suivante est les éléments réduits * / / * Ne pas effacer la minuterie, et il n'a pas fini de faire de l'exercice * / Bend = false; / * Obtenez la vitesse, rapide d'abord puis ralentit * / speed = math.ceil ((ali [i] .offsetwidth-iminwidth) / 10); / * Réduisez la largeur restante * / w = Ali [i] .offsetWidth-Speed; / * Pour éviter que l'élément de rétrécisse soit inférieur à la largeur minimale * / if (w <= iminwidth) {w = iminwidth; } / * Définissez la largeur de l'élément rétrécissant * / ali [i] .style.width = w + 'px'; / * Soustrayez la largeur de rétrécissement, la largeur restante est la largeur étendue * / iWidth- = w; } / * Largeur de l'élément étendu * / ali [iindex] .style.width = iWidth + 'px'; if (Bend) {ClearInterval (odiv.Timer); odiv.timer = null; }} </ script> </ head> <body> <div> <ul> <li> <span> Ceci est le premier </span> <img src = "1.jpg"> </li> <li> <span> c'est le deuxième </span> <img src = "2.jpeg"> </li> <li> <pander> Ceci est le troisième </pander> <li> <span> Ceci est le quatrième </span> <img src = "4.jpg"> </li> <li> <span> Il s'agit du cinquième </span> <img src = "5.jpg"> </li> </ul> </div> </ body> </html>La prochaine chose sera d'utiliser des effets d'animation, afin d'encapsuler le mouvement:
/ * Utiliser les appels, objet OBJ, attribut d'attribut, vitesse de vitesse, valeur qu'Itarget souhaite atteindre, Fn Fonction de rappel FN * // * Parce que les mouvements sont essentiellement en unités de PX, comme pour la transparence, il n'y a pas d'unité, donc je le sépare ici. En fait, je ne l'ai pas beaucoup changé, jugez simplement s'il s'agit de l'attribut de transparence, puis je vais à la ligne de transparence * / fonction Domove (obj, att, Speed, Itarget, fn) {if (att == "Opacity") {obj.len = itarget-parsefloat (getStyle (obj, "opace")) * 100; } else {obj.len = itarget-parsefloat (getStyle (obj, "opacité")); } / * La direction ici est jugée. Celui après le point initial est négatif et celui avant le point initial est positif * / speed = obj.len> 0? Speed: -Speed; ClearInterval (obj.timer); obj.timer = setInterval (function () {if (! obj.num) {obj.num = 0;} if (att == "Opacity") {obj.num = parsefloat (getStyle (obj, att)) * 100 + speed;} else {obj.num = parseint (getStyle (obj, att)) + speed;} a atteint, arrêtez le temporisateur quand il est arrivé * / if (obj.num> = itarget && obj.len> 0 || obj.num <= itarget && obj.len <0) {obj.num = itarget; obj.style [att] = obj.num + "px";} / * Parce qu'il ne réalise pas la fonction complète de la fonction de rappel, certains bogues se sont produits * / if (obj.num> = itarget && obj.len> 0 || obj.num <= itarget && obj.len <0) {fn && fn (); } / * Si vous obtenez la valeur d'attribut CSS, vous obtiendrez la valeur de la performance * / fonction getStyle (obj, attr) {return obj.currentStyle? Obj.currentStyle [att]: getCompuledStyle (obj) [att]; }Image du carrousel:
<! Doctype html> <html lang = "en"> <éad> <meta charset = "utf-8"> <itle> schéma carrousel </ title> <! - Ceci est une référence à la fonction de mouvement encapsulée -> <script type = "text / javascript" src = "Domove.js"> </cript> <script type = "text / javascript"> feedle.on.on. / * Appelez pour implémenter le carrousel * / carrousel ("carrousel")} fonction carrousel (name) {var oscl = document.getElementyId (name); var oul = oscl.QuerySelector ("ul"); var ali = oul.QuerySelectorall ("li"); var next = document.getElementById ("suivant"); var pre = document.getElementById ("pre"); var aindex = oscl.QuerySelectorall (". Index Span"); var num = 0; var index = 0; / * Donnez le niveau le plus élevé de la première image * / Ali [0] .Style.zindex = 5; / * Juger si la minuterie existe * / if (! Oscl.timer) {oscl.timer = null; } / * Ceci est un carrousel automatique sur * / oscl.timer = setInterval (function () {num ++; num% = ali.length; play ();}, 2000); / * Afficher et masquer sur les pages supérieures et inférieures * / oscl.onMouseOver = function () {/ * Déplacer dans le tireur d'arrêt * / clearInterval (oscl.timer); Next.style.display = "Block"; pre.style.display = "bloc"; } oscl.onmouseout = function () {next.style.display = "Aucun"; pre.style.display = "aucun"; / * Déplacez-vous sur Timer * / oscl.timer = setInterval (function () {num ++; num% = ali.length; play ();}, 2000); } / * Cliquez sur la page précédente et suivante * / next.OnClick = function () {num ++; num% = ali.length; jouer(); } pre.onclick = function () {if (! ali [index]) {index = num; } num--; if (num <0) {num = ali.length-1; } jouer(); } / * Point d'index * / for (var i = 0; i <aindex.length; i ++) {aindex [i] .index = i; aindex [i] .onMouseOver = function () {num = this.index; jouer(); }} / * Fonction d'exécution d'animation * / fonction play () {/ * Déterminez simplement s'il s'agit du même point de déclenchement, comme les deux mouvements du point d'index sont les mêmes. S'il n'est pas exécuté, évitez l'exécution répétée en continu * / if (index! = Num) {for (var i = 0; i <ali.length; i ++) {/ * définissez tous les niveaux sur 1 * / ali [i] .style.zindex = 1; } / * Définissez le niveau du dernier carrousel sur 2 * / ali [index] .style.zindex = 2; Aindex [index] .classname = ""; aindex [num] .classname = "actif"; index = num; / * Définissez la transparence de la figure de ce carrousel sur 0 * / ali [num] .style.opacity = 0; / * Définissez le niveau de la figure qui est un carrousel sur 5 * / ali [num] .style.zindex = 5; / * Fonction de mouvement Encapsulation, s'estompée de cette image * / Domove (Ali [num], "Opacité", 10,100); }}} </ script> <style> a {text-decoration: aucun; Couleur: # 555; } #carel {Font-Family: "Microsoft Yahei"; Position: relative; Largeur: 800px; hauteur: 400px; marge: 0 auto; } #carell ul {list-style: Aucun; marge: 0; rembourrage: 0; Position: relative; } #carel ul li {position: absolue; Z-Index: 1; en haut: 0; à gauche: 0; } .imgbox img {width: 800px; hauteur: 400px; } .btn {position: absolue; Z-Index: 10; en haut: 50%; Largeur: 45px; Hauteur: 62px; marge: -31px; Texte-aligne: Centre; hauteur de ligne: 62px; taille de police: 40px; Contexte: RGBA (0,0,0,0,4); Opacité: Alpha (opacité = 50); Affichage: aucun; } #pre {Left: 0; } #next {droit: 0; } #carel .Index {position: absolue; En bas: 10px; Gauche: 50%; Z-Index: 10; } #carel .Index Span {width: 15px; hauteur: 15px; Border-Radius: 50%; Contexte: # 87CEFA; Affichage: bloc en ligne; Box-Shadow: 1PX 1PX 6PX # 4169E1; } #carel .Index span.active {background: # 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> <a href = "#"> <img 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> </span> <span> </span> </div> </div> </odody> </html>Cela se fait à l'aide du plugin: ResponseLides.js
Basé sur jQuery
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <!-- Introducing plugins js and jquery --> <script src="jquery-2.0.3.js"></script> <script src="responsiveslides.js"></script> <style> #banner{ position: relatif; Largeur: 800px; } / * L'attribut CSS par défaut du plugin * / .rslides {position: relatif; Style de liste: aucun; débordement: caché; Largeur: 100%; rembourrage: 0; marge: 0; } .RSLIDES LI {-Webkit-BackFace-Visibilité: Hidden; Position: absolue; Affichage: aucun; Largeur: 100%; à gauche: 0; en haut: 0; } .rslides li: premier-enfant {position: relative; Affichage: bloc; flottant: à gauche; } .RSLIDES IMG {affichage: bloc; Hauteur: Auto; flottant: à gauche; Largeur: 100%; bordure: 0; } / *, modifié, modifié en bouton point * / ul.rslides_tabs.rslides1_tabs {position: absolue; En bas: 10px; Gauche: 45%; Style de liste: aucun; Z-Index: 10; } ul.rslides_tabs.rslides1_tabs li {float: left; } ul.rslides_tabs.rslides1_tabs li a {display: block; Border-Radius: 50%; Largeur: 10px; hauteur: 10px; marge-droite: 10px; Contexte: #FFF; } / * .RSLIDES_HERE Ceci est équivalent à actif * / ul.rslides_tabs.rslides1_tabs li.rslides_here a {background: # 004f88; } / * Nom de classe des boutons gauche et droit * / .rslides_nav.rslides1_nav {position: absolue; en haut: 50%; Couleur: #eee; taille de police: 40px; Décoration du texte: aucune; Z-Index: 4; } .rslides_nav.rslides1_nav.pre {Left: 10px; } .rsLides_nav.rslides1_nav.next {droite: 10px; } .RSLIDES IMG {hauteur: 400px; } </ style> <script> $ (function () {$ (". rslides"). ResponseLides ({pager: true, // par défaut est faux, lors de l'affichage (true), le point d'index est affiché, la défaut est le numéro 12345, allez simplement à la bibliothèque JS pour modifier Nav: Vrai, // Afficher la photo de la Navigation précédente: False, // Move in and Out, la souris est la photo de la photo et le prochain. PauseControls: true, // booléen: pause lorsque les contrôles de volant, true ou faux prévalk, "<", // modifient les symboles des boutons gauche et droit net: ">", // String: Texte pour le "Next" Button "Maxwidth": "800px"}); $ ("# bannière"). MouseOver (function () {$ (". rslides1_nav"). css ("affiche", "bloc");}) $ ("# banner"). Mouseout (function () {$ (". rslides1_nav"). CSS ("affiche", "nul");})}); </cript> </ head> <body> <! - Utilisez un div pour l'envelopper, et ces balises ajoutées par JS seront chargées directement derrière la balise UL -> <div id = "Banner"> <ul id = "RSLIDES"> <li> <img src = "111.jpg"> </li> <li> <imprimante src = "222.jpg"> </li> <li> <li> <imprimante src = "222.jpg"> </ li> src = "333.jpg"> </li> <li> <img src = "444.jpg"> </li> <li> <img src = "555.jpg"> </li> </ul> </div> </ body> </html>Diapositive d'image:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tight> Image Sliding </Title> <style> .Container {position: relative; Largeur: 630px; Border: 2px solide # 888; rembourrage: 5px; } .c-wrap {width: 630px; débordement: caché; } .Container img {width: 200px; hauteur: 90px; } .Container ul {list-style: Aucun; marge: 0; rembourrage: 0; } .Container ul li {float: Left; marge-droite: 10px; } .Container .imgBigBox {width: 33000px; marge-gauche: 0px; } .imgbigbox: après {contenu: ""; Affichage: bloc; Clear: les deux; } .btngroup {border: 1px solide # 888; Largeur: 65px; } .btnGroup A {Text-Align: Center; hauteur de ligne: 20px; Décoration du texte: aucune; Couleur: # 888; taille de police: 20px; Affichage: bloc en ligne; Largeur: 30px; } .btn1 {margin-droite: 4px; Border-droite: 1px solide # 888; } </ style> <! - Citant la fonction de mouvement -> <script type = "text / javaScript" src = "domove.js"> </ script> <script type = "text / javascript"> window.onload = function () {/ * function d'appel pour réaliser le glissement * / slide (". Container"); } fonction diapositive (name) {var ontonainer = document.QuerySelector (name); var oimgbigbox = oConTainer.QuerySelector (". imgbigbox"); var abtn = ocontainer.QuerySelectorAll (". Btngroup A"); var oc_wrap = oConTainer.QuerySelector (". C-wrap"); / * Obtenez la largeur coulissante * / var w = oc_wrap.offsetwidth; / * Cliquez sur le bouton gauche * / abtn [0] .OnClick = function () {Domove (oimgbigbox, "marginleft", 10, -w, function () {var child = oimgbigbox.children [0] .clonenode (true); oiMgBigBox.ApendChild (enfant); 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> <dody> <div> <div> <div> <ul> <li> <img src = "1.jpg"> </li> <li> <img src = "2.jpg"> </li> <li> <if> <li> <img src = "4.jpg"> </li> <li> <img src = "5.jpg"> </li> <li> <img src = "6.jpg"> </li> </ul> </div> </div> <v> <a href = "Javascript :;> </a> </v>Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.