Não atualizei recentemente, então adicionarei alguns efeitos para enriquecê -lo.
Nenhum deles embeleza esta etapa.
Acordeão CSS puro:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> acordeion css </title> <style> .showbox {width: 660px; estouro: oculto; } ul {estilo de listar: nenhum; margem: 0; preenchimento: 0; Largura: 30000px; } ul li {float: esquerda; Posição: relativa; Altura: 254px; Largura: 110px; estouro: oculto; transição: todos os 0,3s; } /*Este é o núcleo do acordeão do CSS, que é o uso de pairar ** Primeiro de tudo, Ul: pairar Li desencadeia mudanças que passaram pelo UL, mas não através de ul **, o mouse: o mouse aqui estão as mudanças que foram aprovadas por meio de Lib, combinando os efeitos de animação do CSS3 e de alguns efeitos do CSS3. Se você usar a implementação pura do JS, pode ser problemático. */ ul: hover li {width: 22px; } ul li: hover {width: 460px; } ul li img {width: 550px; Altura: 254px; } ul li span {width: 22px; Posição: Absoluto; topo: 0; Direita: 0; Altura: 204px; Top-top: 50px; Cor: #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> <mpan> Este é o primeiro </span> <img src = "1.jpg"> </li> <li> <li> este é o segundo </span> <IMG src = 2,jpeg " Terceiro </span> <img src = "3.jpg"> </li> <li> <pan> Este é o quarto </span> <img src = "4.jpg"> </li> <li> <li> é o quinto </span> <img src = "5.jpg"/</hi> </hin </fiv </fiv </fnivAcordeão CSS3:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> CSS3-checked: </title> <style>/* use o recurso de escolha única do rádio para obter o efeito do acordeão*/ul {Display: Nenhum; Nenhum; } input {display: None;} etiqueta {display: block; altura da linha: 40px; fundo de borda: 1px sólido #ddd; Cursor: Ponteiro; Size da fonte: 15px; Fonte-peso: Bold;} .List> ul {Display: Nenhum; -Webkit-transição: todos .5s linear; -moz-transição: todos .5s linear; -ms-transição: todos .5s linear; -O-transição: todos .5s lineares; Transição: todos .5s linear;} #list1: verificado + ul {display: block;} #list2: checked + ul {display: block;} #list3: checked + ul {display: block;} #list4: checked + ul {exibir: block;} </style> </head> <body>> <div> name = "list" id = "list1" checked = "Cheked"/> <ul> <li> <a href = ""> nome da classe </a> </li> <li> <a href = "" names -mate </a> </li> <li> <a href = ""> names -mate "</a> </li> <li> <li> <a href = ""> Nome do colega de classe </a> </li> <li> <a href = ""> nome do mate de classe </a> </li> <li> <a href = ""> nome da classe </a> </li> <li> <a href = ""> names-mate </a> </li> <li> <li> <a href = ""> Nome do colega de classe </a> </li> <li> <a href = ""> nome do mate de classe </a> </li> <li> <a href = "" name de colega </a> </li> <li> <a hre = ""> nomes de classe </apate </li> <li> <li> <a> a ""> ">"> </a> <li> <li> <li> <a hre = ""> names de classe "</a> </li> <li> <li> <li> <a hre =" "> <li> <a href = ""> nome do colega de classe </a> </li> <li> <a href = ""> nome do colega </a> </li> </ul> <etiqueta para = "list3"> meu companheiro </elbel> <input type = "radio" = "list" = "list3> <li> <a href = ""> nome do colega de classe </a> </li> <li> <a href = ""> nome do colega de classe </a> </li> <li> <a href = "" nome de classe de classe </a> </li> <li> <a href = ""> nome de classe "</a> </a> Nome </a> </li> <li> <a href = "" "> nome do colega de classe </a> </li> </ul> <Label para =" list4 "> meu colega href = "" "> companheiro de classe </a> </li> <li> <a href =" ""> companheiro </a> </li> <li> <a href = ""> commateAcordeão implementado por JavaScript:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> acordeão </ititle> <style> .showbox {width: 660px; estouro: oculto; } ul {estilo de listar: nenhum; margem: 0; preenchimento: 0; Largura: 30000px; } ul li.active {width: 550px; } ul li {float: esquerda; Posição: relativa; Altura: 254px; Largura: 22px; estouro: oculto; } ul li img {width: 660px; Altura: 254px; } ul li span {width: 22px; Posição: Absoluto; topo: 0; Esquerda: 0; Altura: 204px; Top-top: 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'); }; função createAccordion (name) { /*get element* / var odiv = document.QuerySelector (nome); /*Declarar largura mínima*/ var iminwidth = 99999999; /*obtenha elemento*/ var ali = odiv.getElementsByTagName ('li'); var aspan = odiv.getElementsByTagName ('span'); /*Contêiner do timer padrão*/ odiv.timer = null; /*Loop Add Event e atributo personalizado Valor*/ for (vari = 0; i <aspan.length; i ++) {aspan [i] .index = i; aspan [i] .onMouseOver = function () {gotoimg (odiv, this.index, iminwidth); }; /*Obtenha a largura mínima*/ iminWidth = Math.min (iminwidth, Ali [i] .offsetWidth); }}; função gotoimg (odiv, iindex, iminwidth) {if (odiv.timer) { /*limpe o timer para evitar a sobreposição* / clearInterval (odiv.timer); } /*Abra o timer* / odiv.timer = setInterval (function () {alteraçãowidthinner (ODIV, iIndex, iminwidth);}, 30); } /*Esta é a chave, movimento* / função alteraçãowidthinner (ODIV, iIndex, iminwidth) {var ali = odiv.getElementsByTagName ('li'); var aspan = odiv.getElementsByTagName ('span'); /*Obtenha o tamanho da caixa, esta é a largura total*/ var iwidth = odiv.offsetWidth; /*A declaração de largura da imagem recuada*/ var w = 0; /*Declaração de julgamento, a fim de limpar a declaração do timer*/ var Bend = true; /*Loop para fazer loop cada imagem, a fim de obter os elementos estendidos e encolhidos*/ para (var i = 0; i <ali.length; i ++) {/*Isso é obter o índice estendido*/ if (i == iindex) {continue; } /*Existem elementos que não têm alterações; portanto, a largura mínima é salva* / if (iminwidth == ali [i] .offsetWidth) { /*largura total subtrai essas larguras, porque eles também estão na largura total* / iwidth- = iminwidth; continuar; } /*O código no loop a seguir são os elementos reduzidos* / /*não limpam o temporizador e não terminou de exercitar* / bend = false; / *Obtenha velocidade, rápido primeiro e depois lento */speed = Math.ceil ((Ali [i] .offsetWidth-iminwidth)/10); /*Reduza a largura restante*/ w = ali [i] .offsetWidth Speed; /*Para evitar o elemento encolhido sendo menor que a largura mínima*/ if (w <= iminwidth) {w = iminwidth; } /*Defina a largura do elemento cada vez menor* / ali [i] .style.width = w+'px'; /*Subtraia a largura de encolhimento, a largura restante é a largura estendida*/ iwidth- = w; } /*Largura do elemento estendido* / ali [iindex] .style.width = iwidth+'px'; if (Bend) {ClearInterval (Odiv.timer); odiv.timer = null; }} </script> </adhead> <body> <div> <ul> <li> <mpan> Este é o primeiro </span> <img src = "1.jpg"> </li> <li> </span> este é o segundo </span> <mg sc = "2.jpeg"> </li> <li> <span> <li> <pan> Este é o quarto </span> <img src = "4.jpg"> </li> <li> <pan> Este é o quinto </span> <img src = "5.jpg"> </li>A próxima coisa será usar os efeitos da animação, de modo a encapsular o movimento:
/*Use chamadas, objeto OBJ, atributo ATTR, velocidade de velocidade, o valor que o iTarget deseja alcançar, função de retorno de chamada FN*//*porque os movimentos estão basicamente em unidades de PX, como para transparência, não há unidade, então eu o separo aqui. Na verdade, eu não mudei muito, apenas julgo se é o atributo de transparência e depois vá para a linha de transparência*/ função domove (obj, att, speed, iTarget, fn) {if (att == "opacity") {obj.len = itarget-parsefloat (getstyle (obj) {opj.)*100; } else {obj.len = itarget-parsefloat (getStyle (obj, "opacidade")); } /*A direção aqui é julgada. O após o ponto inicial é negativo e o antes do ponto inicial é positivo*/ speed = obj.len> 0? Velocidade: -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;} {obj.num = parsent (getSyle,)*100+speed;} {obj.num = parsent (getSyle, (obj))*100+speed;} {obj.num = parsent (getSyle, (obj))*100+speed;} {obj.num = parsent (getSyle, Atingido, pare o timer quando chegou*/ se (obj.num> = itelget && obj.len> 0 || obj.num <= itarget && obj.len <0) {obj.num = itarget; obj.style [att] = obj.num+"px"; } /*Se você obtiver o valor do atributo CSS, obterá o valor do desempenho* / function getStyle (obj, att) {return obj.currentStyle? Obj.currentStyle [att]: getComputedStyle (obj) [att]; }Imagem do carrossel:
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Diagrama de carrossel </ititle> <!-Esta é uma referência à função de movimento encapsulada-> <script type = "text/javascript" src = "domove.js"> </script> window.onload = function () { /*Call para implementar carrossel* / carousel ("carousel")} função carousel (nome) {var oscl = document.getElementById (nome); var ol = oscl.QuerySelector ("ul"); var ali = Oul.QuerySelectorAll ("Li"); var a próximo = document.getElementById ("Next"); var pre = document.getElementById ("pré"; var aindex = oscl.QuerySelectorAll (". Span de índice"); var num = 0; var índice = 0; /*Dê o nível mais alto da primeira imagem*/ ali [0] .style.zindex = 5; /*Julgue se o timer existe*/ if (! Oscl.timer) {oscl.timer = null; } /*Este é um carrossel automático em* / oscl.timer = setInterval (function () {num ++; num%= ali.length; play ();}, 2000); /*Mostre e oculte as páginas superior e inferior*/ oscl.onMouseOver = function () {/*Mova no timer de parada*/ clearInterval (oscl.timer); next.style.display = "bloco"; pre.style.display = "bloco"; } oscl.onmouseout = function () {next.style.display = "nenhum"; pre.style.display = "nenhum"; /*Mova -se no timer*/ oscl.timer = setInterval (function () {num ++; num%= ali.length; play ();}, 2000); } /*Clique na página anterior e seguinte* / next.OnClick = function () {num ++; NUM%= Ali.Length; jogar(); } pre.OnClick = function () {if (! Ali [index]) {index = num; } num--; if (num <0) {num = Ali.Length-1; } jogar(); } /*Ponto de índice* / for (var i = 0; i <aindex.length; i ++) {aindex [i] .index = i; aindex [i] .onMouseOver = function () {num = this.index; jogar(); }} /*Função de execução de animação* /function play () { /*basta determinar se é o mesmo ponto de gatilho, como os dois movimentos do ponto de índice são os mesmos. Se não for executado, evite a execução repetida continuamente*/ if (index! = Num) {for (var i = 0; i <ali.length; i ++) {/*defina todos os níveis como 1*/ ali [i] .style.zindex = 1; } /*Defina o nível do último carrossel como 2* / ali [index] .style.zindex = 2; aindex [index] .className = ""; aindex [num] .className = "ativo"; índice = num; /*Defina a transparência da figura deste carrossel como 0*/ ali [num] .style.Opacity = 0; /*Defina o nível da figura que é um carrossel para 5*/ ali [num] .style.zindex = 5; /*Encapsulamento da função de movimento, desaparece desta imagem*/ domove (Ali [num], "Opacity", 10.100); }}} </script> <yoy> a {text-decoração: nenhum; Cor: #555; } #carousel {Font-Family: "Microsoft Yahei"; Posição: relativa; Largura: 800px; Altura: 400px; margem: 0 automático; } #CAROUSEL UL {estilo de lista: Nenhum; margem: 0; preenchimento: 0; Posição: relativa; } #carousel ul li {posição: absoluto; Z-Index: 1; topo: 0; Esquerda: 0; } .imgbox img {width: 800px; Altura: 400px; } .btn {posição: absoluto; Z-Index: 10; TOP: 50%; Largura: 45px; Altura: 62px; Margin -top: -31px; Alinhamento de texto: centro; altura da linha: 62px; Size da fonte: 40px; Antecedentes: RGBA (0,0,0,0.4); opacidade: alfa (opacidade = 50); Exibir: Nenhum; } #pre {esquerda: 0; } #Next {direita: 0; } #carousel .Index {Position: Absolute; Inferior: 10px; Esquerda: 50%; Z-Index: 10; } #carousel .index span {width: 15px; Altura: 15px; Radio de fronteira: 50%; Antecedentes: #87CEFA; Exibição: bloco embutido; Box-Shadow: 1px 1px 6px #4169E1; } #carousel .Index span.active {Background: #4169E1; Shadow Box: 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.jpgg"> </a> 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 hre (a hre (hre) src = "5.jpg"> </a> </li> </ul> <a href = "javascript :;" id = "Next" >> </a> <a href = "javascript :;" id = "pré"> <</a> <div> <pange> </span> <pan> </span> <pan> </span> </span> </span> </span> </span> </span> </span> </div> </div> </body </stml>Isso é feito usando o plug -in: ResponsivesLides.js
Baseado no jQuery
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <titter> document </title> <!-Apresentando plugins js e jQuery-> <script src = "jQuery-2.0.3.js"> </script> <script src = " Posição: relativa; Largura: 800px; } /* O atributo CSS padrão do plug -in* / .rslides {position: relativo; estilo de lista: nenhum; estouro: oculto; largura: 100%; preenchimento: 0; margem: 0; } .rslides li {-webkit-backface-visibilidade: hidden; Posição: Absoluto; Exibir: Nenhum; largura: 100%; Esquerda: 0; topo: 0; } .rslides li: primeiro filho {posição: parente; exibição: bloco; flutuar: esquerda; } .rslides img {display: block; Altura: Auto; flutuar: esquerda; largura: 100%; borda: 0; } /*, modificado, modificado para botão pontilhado* / ul.rslides_tabs.rslides1_tabs {Position: Absolute; Inferior: 10px; Esquerda: 45%; estilo de lista: nenhum; Z-Index: 10; } ul.rslides_tabs.rslides1_tabs li {float: esquerda; } ul.rslides_tabs.rslides1_tabs li a {display: block; Radio de fronteira: 50%; Largura: 10px; Altura: 10px; Margem-direita: 10px; Antecedentes: #FFF; } / * .rslides_here isso é equivalente a ativo * / ul.rslides_tabs.rslides1_tabs li.rslides_here a {background: #004f88; } /* Classe Nome dos botões esquerdo e direito* / .rslides_nav.rslides1_nav {Position: Absolute; TOP: 50%; Cor: #eee; Size da fonte: 40px; Decoração de texto: Nenhum; Z-Index: 4; } .rslides_nav.rslides1_nav.pre {esquerda: 10px; } .rslides_nav.rslides1_nav.next {direita: 10px; } .rslides img {altura: 400px; } </style> <cript> $ (function () {$ (". rslides"). ResponsivesLides ({pager: true, // O padrão é falso, ao exibir (true), o ponto de índice é exibido, o padrão é o número do número 12345, apenas vá para o JS Library para modificar o Nav: verdadeiro, // mostra o próximo e o próximo e o próximo e o próximo e o próximo e o próximo e o que é o que é o que é o que é o que é o que é o que é o número de fotos, o ponto de vista é que o ponto de vista é o que é o que é o que você está com releodas, com o objetivo de avaliar que é que é necessário que o ponto de vista seja, o ponto de vista e é o que é o que você está fazendo. PauseControls: true, // booleano: pausar ao passar o mouse, True ou False PrevText: "<", // modifica os símbolos dos botões esquerdo e direito NextText: ">", // string: text para o botão "a seguir" "maxwidth": "800px" "}); $ ("#banner"). mouseOver (function () {$ (". </script> </ad Head> <body> <!-use uma div para envolvê-lo, e essas tags adicionadas por JS serão carregadas diretamente atrás da tag ul-> <div id = "banner"> <ul id = "rslides"> <li> <img src = "111.jpg"> </li> <li> <mi> src = "333.jpg"> </li> <li> <img src = "444.jpg"> </li> <li> <img src = "555.jpg"> </li> </ul> </div> </body> </html>Slide de imagem:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> imagem deslizando </title> <style> .Container {Posição: relativa; Largura: 630px; fronteira: 2px Solid #888; preenchimento: 5px; } .c-wrap {width: 630px; estouro: oculto; } .container img {width: 200px; Altura: 90px; } .Container UL {estilo de lista: nenhum; margem: 0; preenchimento: 0; } .Container ul li {float: esquerda; Margem-direita: 10px; } .Container .imgbigBox {Width: 33000px; margem-esquerda: 0px; } .imgbigBox: após {content: ""; exibição: bloco; claro: ambos; } .btnGroup {borda: 1px Solid #888; Largura: 65px; } .btnGroup a {text-align: Center; altura de linha: 20px; Decoração de texto: Nenhum; Cor: #888; Size da fonte: 20px; Exibição: bloco embutido; Largura: 30px; } .btn1 {margem-direita: 4px; Fronteira: 1px Solid #888; } </style> <!-citando função de movimento-> <script type = "text/javascript" src = "domove.js"> </script> <script type = "text/javascript"> window.onload = function () {/*função para obter deslizamento*/slide (". } função slide (nome) {var oContainer = document.QuerySelector (nome); var oimgbigBox = Ocontainer.QuerySelector (". imgbigBox"); var abtn = Ocontainer.QuerySelectorAll (". Btngroup A"); var oc_wrap = Ocontainer.QuerySelector (". C-wrap"); /*Obtenha a largura deslizante*/ var w = oc_wrap.offsetWidth; /*Clique no botão esquerdo*/ abtn [0] .OnClick = function () {domove (oimgbigBox, "marginleft", 10, -w, function () {var child = oimgbigbox.Children [0] .clonode (true); oimgbigBox.apmendChild (criança); 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> <ul> <li> <img src = "4.jpg"> </li> <li> <img src = "5.jpg"> </li> <li> <img src = "6.jpg"> </li> </ul> </div> <div> <div> <a href = "javascript:" </div> </body> </html>O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.