Я не обновился недавно, поэтому я просто добавлю несколько эффектов, чтобы обогатить его.
Никто из них не украшает этот шаг.
Чистый аккордеон CSS:
<! Doctype html> <html lang = "en"> <Head> <meta charset = "UTF-8"> <Title> Accordion CSS </title> <style> .showbox {width: 660px; переполнение: скрыто; } ul {list-style: none; поля: 0; Заполнение: 0; Ширина: 30000px; } ul li {float: left; позиция: относительно; Высота: 254px; Ширина: 110px; переполнение: скрыто; Переход: все 0,3 с; } /*Это ядро CSS-аккордеона, которое является использованием парящего **, прежде всего, UL: Hover Li Triggers Triggers, которые прошли через UL, но не через UL **, затем UL LI: Hover Здесь-это изменения, которые были внесены через LIB, соответствующие эффектам анимации CSS3 и некоторых последствий CSS3 на благоустройство страницы, вы можете сделать хорошую аккордеоона. Если вы используете Pure JS -реализацию, это может быть неприятным. */ ul: Hover li {ширина: 22px; } ul li: hover {width: 460px; } ul li img {width: 550px; Высота: 254px; } ul li span {width: 22px; позиция: абсолютно; Верх: 0; Справа: 0; Высота: 204px; надоеволок: 50px; Цвет: #fff; } ul li span.bg1 {founale: #333; } ul li span.bg2 {founale: #0f0; } ul li span.bg3 {founale: #ff7500; } ul li span.bg4 {founale: #0ff; } ul li span.bg5 {founale: #00f; } </style> <script type = "text/javascript"> </script> </head> <body> <viv> <ul> <li> <pan> Это первый </span> <img src = "1.jpg"> </li> <li> <pan> Это второе </span> <img src = "2.jpeg"> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> третий </span> <img src = "3.jpg"> </li> <li> <pan> Это четвертый </span> <img src = "4.jpg"> </li> <li> <pan> Это пятый </span> <img src = "5.jpg"> </li> </ul> </div> </hody> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht> </ht>CSS3 Аккордеон:
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> CSS3-проверка: </title> <style>/* Используйте функцию одиночной выборки радио, чтобы достичь эффекта аккордеона*/ul {дисплей: нет; } input {display: none;} label {display: block; высота линии: 40px; Пограничный подъем: 1px solid #ddd; курсор: указатель; размер шрифта: 15px; Font-Weight: Bold;} .List> ul {Display: None; -Вебкит-трансляция: все .5s линейно; -Моз-трансляция: все .5s линейно; -Мас-транзиция: все .5s линейно; -О-транзиция: все .5s линейно; transition:all .5s linear;} #list1:checked + ul{display: block;} #list2:checked + ul{display: block;} #list3:checked + ul{display: block;} #list4:checked + ul{display: block;} </style></head><body> <div> <label for="list1">My classmate</label> <input type="radio" name = "list" id = "list1" checked = "chekced"/> <ul> <li> <a href = ""> Имя одноклассника </a> </li> <li> <a href = ""> Имя одноклассника </a> </li> <li> <a href = "> classmate name </a> </li> <li> Имя </a> </li> <li> <a href = ""> Имя одноклассника </a> </li> <li> <a href = ""> Имя одноклассника </a> </li> <li> <a href = ""> Имя одноклассника </a> </li> <li> <a href = "" href = ""> Имя одноклассника </a> </li> <li> <a href =" "> Имя одноклассника </a> </li> <li> <a href =" "> Имя одноклассника </a> </li> <li> <a href =" "> classmate name </a> </li> <li> <a href ="> "> li name </a> </li> <li> <li> <a href = ""> Имя одноклассника </a> </li> <li> <a href = ""> Имя Classmate </a> </li> <li> <a href = ""> Имя одноклассника </a> </li> </ul> <label для = list3 "> my classate </label> </li> </ul? <ul> <li> <a href = ""> Имя одноклассника </a> </li> <li> <a href = ""> Имя одноклассника </a> </li> <li> <a href = ""> Имя одноклассника </a> </li> <li> <a href = "> Название класса </a> </li> <li> href="">Classmate's Name</a></li> <li><a href="">Classmate's Name</a></li> <li><a href="">Classmate's Name</a></li> </ul> <label for="list4">My classmate</label> <input type="radio" name="list" id="list4"/> <ul> <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> <ahref = "> li </div> </body> </html>Аккордеон, реализованный JavaScript:
<! Doctype html> <html lang = "en"> <Head> <meta charset = "UTF-8"> <Title> Accordion </title> <style> .showbox {ширина: 660px; переполнение: скрыто; } ul {list-style: none; поля: 0; Заполнение: 0; Ширина: 30000px; } ul li.active {width: 550px; } ul li {float: left; позиция: относительно; Высота: 254px; Ширина: 22px; переполнение: скрыто; } ul li img {width: 660px; Высота: 254px; } ul li span {width: 22px; позиция: абсолютно; Верх: 0; слева: 0; Высота: 204px; надоеволок: 50px; } ul li span.bg1 {founale: #333; } ul li span.bg2 {founale: #0f0; } ul li span.bg3 {founale: #ff7500; } ul li span.bg4 {founale: #0ff; } ul li span.bg5 {founale: #00f; } </style> <script type = "text/javascript"> window.onload = function () {createAccordion ('. Showbox'); }; Функция CreateAccordion (name) { /*get element* / var Odiv = document.queryselector (name); /*Объявить минимальную ширину*/ var iminwidth = 9999999; /*Получить элемент*/ var ali = Odiv.getElementsBytagName ('li'); var aspan = odiv.getelementsbytagname ('span'); /*Контейнер таймер по умолчанию*/ ODIV.Timer = null; /*Целье Добавить событие и индекс индекса атрибутов*/ for (vari = 0; i <aspan.length; i ++) {aspan [i] .index = i; aspan [i] .onmouseover = function () {gotoimg (Odiv, this.index, iminwidth); }; /*Получить минимальную ширину*/ iminwidth = math.min (iminwidth, ali [i] .offsetwidth); }}; функция gotoimg (Odiv, iindex, iminwidth) {if (Odiv.timer) { /*очистить таймер, чтобы избежать наложения* / clearInterval (Odiv.timer); } /*Откройте таймер* / odiv.timer = setInterval (function () {changeWidThinner (Odiv, iindex, iminWidth);}, 30); } /*Это ключ, Motion* / function изменение Whidthinner (Odiv, iindex, iminwidth) {var ali = Odiv.getElementsBytagName ('li'); var aspan = odiv.getelementsbytagname ('span'); /*Получите размер коробки, это общая ширина*/ var iwidth = odiv.offsetwidth; /*Декларация ширины с отступом изображением*/ var W = 0; /*Объявление суда, чтобы очистить объявление таймера*/ var bend = true; /*Цикл, чтобы зацикнуть каждое изображение, чтобы получить расширенные и уменьшенные элементы*/ for (var i = 0; i <ali.length; i ++) {/*Это для получения расширенного индекса*/ if (i == iindex) {продолжение; } /*Существуют элементы, которые не имеют изменений, поэтому минимальная ширина сохраняется* / if (iminWidth == ali [i] .OffSetWidth) { /*Общая ширина вычитает эти ширины, потому что они также находятся в общей ширине* / iwidth- = iminWidth; продолжать; } /*Код в следующем цикле - это уменьшенные элементы* / /*Не очищайте таймер, и он не закончил заниматься* / bend = false; / *Получить скорость, сначала быстро, а затем медленная */speed = math.ceil ((ali [i] .OffSetWidth-IminWidth)/10); /*Уменьшить оставшуюся ширину*/ w = ali [i] .OffSetWidth-Speed; /*Чтобы избежать сокращающегося элемента меньше минимальной ширины*/ if (w <= iminwidth) {w = iminwidth; } /*Установите ширину сокращающегося элемента* / ali [i] .style.width = w+'px'; /*Вычтите ширину сокращения, оставшаяся ширина-расширенная ширина*/ iwidth- = w; } /*Ширина расширенного элемента* / ali [iindex] .style.width = iwidth+'px'; if (bend) {clearInterval (Odiv.timer); Odiv.timer = null; }} </script> </head> <body> <div> <ul> <li> <pan> Это первый </span> <img src = "1.jpg"> </li> <li> <pan> Это второе </span> <img src = "2.jpeg"> </li> <li> <pap> Это третье </span> <img src> ". <li> <pan> Это четвертый </span> <img src = "4.jpg"> </li> <li> <pan> Это пятый </span> <img src = "5.jpg"> </li> </ul> </div> </body> </html>Следующим будет использование анимационных эффектов, чтобы инкапсулировать движение:
/*Используйте вызовы, объект obj, атрибут атрибута, скорость скорости, значение, которое хочет достичь иаргета, функция обратного вызова FN*//*Поскольку движения в основном находятся в единицах PX, как и для прозрачности, нет единицы, поэтому я отделяю его здесь. На самом деле, я не сильно его изменил, просто судил, является ли это атрибутом прозрачности, а затем перейти к линии прозрачности*/ Функциональный Domove (obj, ATTR, Speed, Itarget, Fn) {if (attr == «непрозрачность») {obj.len = itarget-parsefloat (getStyle (Obj, «непрозрачность»))*100; } else {obj.len = itarget-parsefloat (getStyle (obj, "непрозрачность")); } /*Направление здесь оценивается. Один после начальной точки отрицательна, а до начальной точки положительна*/ speed = obj.len> 0? Speed: -speed; ClearInterval (obj.timer); obj.timer = setInterval (function () {if (! obj.num) {obj.num = 0;} if (attr == "непрозрачность") {obj.num = parsefloat (getStyle (obj, attr))*100+speed;} else {obj.num = parseint (obstyle (obj (obj)+chope; Достигнут, остановите таймер, когда он прибыл*/ if (obj.num> = itarget && obj.len> 0 || obj.num <= itarget && obj.len <0) {obj.num = itarget; obj.style [attr] = obj.num+"px"; } /*Если вы получите значение атрибута CSS, вы получите значение производительности* / function getStyle (obj, attr) {return obj.currentStyle? Obj.currentStyle [attr]: getComputedStyle (obj) [attr]; }Карусель изображение:
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> Диаграмма каруселей </title> <!-Это ссылка на функцию инкапсулированного движения-> <script type = "text/javascript" src = "domove.js"> </script> <script> <script = "javascript" src = "jomove.js"> </script> <script = javascript "domove.js"> </script> <script = javascript "/javascript"> </script> <script = javascript "> window.onload = function () { /*Вызов для реализации Carousel* / carousel ("carousel")} function 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 (".. Index Span"); var num = 0; var index = 0; /*Дайте самый высокий уровень первой картинки*/ ali [0] .style.zindex = 5; /*Судите, существует ли таймер*/ if (! Oscl.timer) {oscl.timer = null; } /*Это автоматическая карусель на* / oscl.timer = setInterval (function () {num ++; num%= ali.length; play ();}, 2000); /*Показать и скрыть на верхних и нижних страницах*/ oscl.onmouseover = function () {/*Переместить в таймере остановки*/ clearInterval (oscl.timer); next.style.display = "block"; pre.style.display = "block"; } oscl.onmouseout = function () {next.style.display = "none"; pre.style.display = "нет"; /*Перемещаться по таймеру*/ oscl.timer = setInterval (function () {num ++; num%= ali.length; play ();}, 2000); } /*Нажмите на предыдущую и следующую страницу* / next.onclick = function () {num ++; num%= ali.length; играть(); } pre.onclick = function () {if (! ali [index]) {index = num; } num--; if (num <0) {num = ali.length-1; } играть(); } /*Индекс точка* / for (var i = 0; i <aindex.length; i ++) {aindex [i] .index = i; aindex [i] .onmouseover = function () {num = this.index; играть(); }} /*Функция выполнения анимации* /function play () { /*просто определить, является ли это той же триггерной точкой, например, два движения точки индекса одинаковы. Если это не выполнено, непрерывно избегайте повторного выполнения*/ if (index! = Num) {for (var i = 0; i <ali.length; i ++) {/*Установить все уровни на 1*/ ali [i] .style.zindex = 1; } /*Установите уровень последней карусели на 2* / ali [index] .style.zindex = 2; aindex [index] .classname = ""; aindex [num] .classname = "active"; index = num; /*Установите прозрачность фигуры этой карусели на 0*/ ali [num] .style.opacity = 0; /*Установите уровень фигуры, который является каруселем для 5*/ ali [num] .style.zindex = 5; /*Инкапсуляция функции движения, исчезнуть из этой картинки*/ domove (ali [num], «непрозрачность», 10 100); }}} </script> <style> a {text-decoration: none; Цвет: #555; } #carousele {font-family: "microsoft yahei"; позиция: относительно; Ширина: 800px; Высота: 400px; Поле: 0 Авто; } #carousel ul {style-style: none; поля: 0; Заполнение: 0; позиция: относительно; } #carousel ul li {position: Absolute; z-index: 1; Верх: 0; слева: 0; } .imgbox img {width: 800px; Высота: 400px; } .btn {position: Absolute; z-index: 10; Верх: 50%; Ширина: 45px; Высота: 62px; маржинальная версия: -31px; Текст-альбом: Центр; высота линии: 62px; размер шрифта: 40px; Предпосылки: RGBA (0,0,0,0,4); непрозрачность: альфа (непрозрачность = 50); дисплей: нет; } #pre {Left: 0; } #next {right: 0; } #CarouseL .Index {позиция: Absolute; Внизу: 10px; Слева: 50%; z-index: 10; } #CarouseL .Index span {width: 15px; высота: 15px; граница радий: 50%; Фон: #87CEFA; дисплей: встроенный блок; Box-Shadow: 1px 1px 6px #4169e1; } #CarouseL .Index span.Active {founale: #4169e1; Box-Shadow: 1px 1px 6px #87cefa вставка; } </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> src = "2.jpg"> </a> </li> <li> <a href = "#"> <img src = "3.jpg"> </a> </li> <li> <a href = "#"> <img src = "4.jpg"> </a> </li> <li> src = "5.jpg"> </a> </li> </ul> <a href = "javascript:;" id = "Next" >> </a> <a href = "javascript:;" id = "pre"> <</a> <div> <pan> </span> <pan> </span> <pan> </span> <pan> </span> <pan> </span> <pan> </span> <pan> </span> </div> </div> </body> </html>Это делается с помощью плагина: responsivslides.js
На основе jQuery
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> Document </title> <!-Введение плагинов JS и jQuery-> <Script Src = "jQuery-2.0.3.js"> </script> <cript src = "respensives.js> </strys> </script> <script> </script> </script> </script> </script> </script> </script> </script. позиция: относительно; Ширина: 800px; } /* Атрибут CSS по умолчанию плагина* / .rslides {position: относительно; Список стиля: нет; переполнение: скрыто; Ширина: 100%; Заполнение: 0; поля: 0; } .rslides li {-webkit-backface-visibuilt: hidden; позиция: абсолютно; дисплей: нет; Ширина: 100%; слева: 0; Верх: 0; } .rslides li: первый ребенок {позиция: относительно; дисплей: блок; Плавание: осталось; } .rslides img {display: block; Высота: Авто; Плавание: осталось; Ширина: 100%; граница: 0; } /*, модифицировано, модифицирована на кнопку DOT* / ul.rslides_tabs.rslides1_tabs {position: Absolute; Внизу: 10px; Слева: 45%; Список стиля: нет; z-index: 10; } ul.rslides_tabs.rslides1_tabs li {float: left; } ul.rslides_tabs.rslides1_tabs li a {display: block; граница радий: 50%; Ширина: 10px; Высота: 10px; Право маржи: 10px; Фон: #fff; } / * .rslides_here Это эквивалентно активному * / ul.rslides_tabs.rslides1_tabs li.rslides_here a {founale: #004f88; } /* Имя класса левых и правых кнопок* / .rslides_nav.rslides1_nav {position: Absolute; Верх: 50%; Цвет: #EEE; размер шрифта: 40px; Текстовое декорация: нет; Z-Index: 4; } .rslides_nav.rslides1_nav.pre {left: 10px; } .rslides_nav.rslides1_nav.next {right: 10px; } .rslides img {height: 400px; } </style> <script> $ (function () {$ (". rslides"). acsusiveSlides ({pager: true, // по умолчанию неверно, при отображении (True), указанную точку, по умолчанию - номер 12345, просто перейдите в библиотеку JS, чтобы модифицировать флот: True, // предыдущий и сфотографический PAUSECONTROLS: TRUE, // BOOLEAN: Пауза, когда управляющие паряками, TRUE или FALSE PREVTEXT: «<», // Модифицировать символы левой и правой кнопки Next Text: «>», // Строка: текст для «следующей» кнопки «maxwidth»: «800px»}); $ ("#banner"). Mouseover (function () {$ (". rslides1_nav"). CSS ("Display", "Block");}) $ ("#banner"). Mouseout (function () {$ (". rslides1_nav"). </script> </head> <body> <!-Используйте Div, чтобы обернуть его, и эти теги, добавленные JS, будут загружены непосредственно за тегом UL-> <div id = "banner"> <ul id = "rslides"> <li> <img src = "111.jpg"> </li> <li> <img src = "222. src = "333.jpg"> </li> <li> <img src = "444.jpg"> </li> <li> <img src = "555.jpg"> </li> </ul> </div> </body> </html>Слайд изображения:
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> Slining </title> <style> .container {позиция: относительно; Ширина: 630px; Граница: 2PX SOLID #888; Заполнение: 5px; } .c-wrap {width: 630px; переполнение: скрыто; } .container img {width: 200px; Высота: 90px; } .container ul {list-style: none; поля: 0; Заполнение: 0; } .container ul li {float: left; Право маржи: 10px; } .container .imgbigbox {width: 33000px; Полевая левая: 0PX; } .imgbigbox: после {content: ""; дисплей: блок; ясно: оба; } .btngroup {border: 1px solid #888; Ширина: 65px; } .btngroup a {text-align: center; высота линии: 20px; Текстовое декорация: нет; Цвет: #888; размер шрифта: 20px; дисплей: встроенный блок; Ширина: 30px; } .btn1 {margin-right: 4px; граница правая: 1px solid #888; } </style> <!-цитирование функции движения-> <script type = "text/javascript" src = "domove.js"> </script> <script type = "text/javascript"> window.onload = function () {/*Функция вызова для достижения скольжения*/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"); /*Получить ширину скольжения*/ var w = oc_wrap.offsetwidth; /*Нажмите на левую кнопку*/ abtn [0] .onclick = function () {domove (oimgbigbox, "marginleft", 10, -w, function () {var Child = oimgbigbox.children [0] .clonenode (true); oimgbigbox.appendchild (chidle); 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 = "/jpg"/li> </li> <li> <li> <img src = "/"/" <ul> <li> <img src = "4.jpg"> </li> <li> <img src = "5.jpg"> </li> <li> <img src = "6.jpg"> </li> </ul> </div> </div> <viv> <a href = "javascript :; </div> </body> </html>Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.