Давайте представим визуализации с фотографиями, которые я понял в соответствии с объяснением онлайн -видео.
Окончательный эффект заключается в следующем:
• Когда изображение нажимается, изображение перемещается в среднюю область и увеличивается. Когда изображение нажимается, передняя и задняя сторона переключаются на отображение.
• Когда определенное изображение нажимается, позиции всех изображений случайным образом переупорядочиваются
• Когда кнопка управления нажимается, соответствующее изображение отображается в середине, а кнопка управления меняет соответствующий стиль. Когда кнопка управления нажимается непрерывно, изображение будет переключать переднюю и заднюю сторону с нажатием кнопки
VCD разложение всего эффекта, как показано на рисунке ниже:
Разложить случаи таким образом, чтобы компьютеры могли понять.
• Просмотр зрения: HTML + CSS Basic Interface Template
• Контроллер: обработка контента JavaScript, обработка событий
• Данные данных: data.js не требуется, помогает понять
Данные данные очень часто используются. Если вы пишете контент в представление, то есть HTML, вы должны изменить HTML, когда хотите изменить контент, но если вы используете VCD, вам нужно только изменить часть данных. В то же время общая часть данных генерируется фоном, поэтому такая замена более удобна. Плакаты в этом случае генерируются шаблонами плюс данные.
Просмотреть раздел
Область эффекта разложена на следующие три части:
• Текущая зона плаката
Горизонтальный и вертикальный центр
Позволяет отображать и перевернуть <кнопку управления>
• Слева и левые зоны хранения
Разделите на левые и правые области на <текущая зона плаката>
Это для хранения других плакатов
Каждый плакат случайно расположен и угнет
• Управляющая бара
Управление и отображать соответствующий плакат
Flip Toggle <текущий дисплей -плакат> спереди и сзади
Реализованный код HTML выглядит следующим образом:
<Body OnSelectStart = 'return false;'> <!-Здесь, чтобы предотвратить выбранное текст страницы-> <!-2. Перепишите представление как строку шаблона-> <div id = "wrap"> <!-div.photo несет ответственность за перевод и ротацию-> <div onclick = "Turn (This)" Id = "Photo _ _ _ _ _ _ {jap {rapoto"! for flipping the front and back --> <div> <p><img src="photo/{{img}}"></p> <p>{{caption}}</p> </div> <div> <p>{{desc}}</p> </div> </div> </div> </div> </div> </div> </div>Здесь, {{img}}, {{caption}} и {{desc}} являются шаблонными строками, а часть данных будет соответствующей, но заменена позже.
Стиль точки зрения заключается в следующем:
<style type = "text/css"> *{padding: 0; поля: 0; } body {foangy-color: #ffff; Цвет:#555; Фамилия Font: «Avenir Next», «Lantinghei SC»; размер шрифта: 14px; -Моз-font-smothing: антиалиас; -Webkit-font-smothing: intialiased;/*шрифт гладкий*/} .wrap {// Область изображения вертикально центрирована по ширине тела: 100%; Высота: 900px; позиция: абсолютно; /*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Топ: 50%; маржинальная версия: -300px; /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- /*Потому что каждый постер случайным образом позиционируется с использованием верхнего и левого, установите положение в абсолютное*/ позиция: абсолютно; z-index: 1; Box-Shadow: 0 0 1px rgba (0,0,0, .01); /*Преобразование: rotatey (30deg);*/ -moz -транзиция: все .6s; /*Пусть плакат перемещается, чтобы создать эффект анимации*/ -Webkit -транзирование: все .6s; } .photo .side {ширина: 100%; высота: 100%; фоновый цвет: #EEE; позиция: абсолютно; Верх: 0; Справа: 0; Заполнение: 20px; Распределение коробки: пограничная коробка; } .photo .side-front .image {ширина: 100%; Высота: 250px; высота линии: 250px; переполнение: скрыто; } .photo .side-front .image img {ширина: 100%; } .photo .side-front .caption {text-align: center; размер шрифта: 16px; высота линии: 50px; } .photo .side-back .desc {color:#666; размер шрифта: 14px; высота линии: 1,5 эм; } /*Выбранный в данный момент стиль плаката* /.photo_center { /*--- Реализуйте метод вертикального центрирования один слева: 50%; Верх: 50%; Мяглевая маржа: -130px; маржинальная версия: -160px; *//*Реализовать метод вертикального центрирования два*/ top: 0; Внизу: 0; слева: 0; Справа: 0; Порность: Авто; z-index: 999; // Пусть выбранные в данный момент плакат не будет покрыты другими плакатами}/*Ответственный за переключение*/.photo-wrap {position: Absolute; Ширина: 100%; высота: 100%; -Моз-трансформ в стиле: страда-3D; -Вебкит-трансформ-стиль: reverve-3d;/*Пусть элементы внутри поддерживают эффект 3d*/ transform-style: reverve-3d;/*Из-за этого предложения задняя часть Firefox не может быть отображена*/ -Webkit-transition: все 1s; -Моз-трансляция: все 1s; Переход: все 1s; / Задняя видимость: скрыта; } .photo-wrap .side-front {-moz-transform: rotatey (0deg); -Webkit-transform: rotatey (0deg); преобразование: rotatey (0deg); } .photo-wrap .side-back {-moz-transform: rowatey (180deg); -Вебкит-трансформ: Rotatey (180deg); Преобразование: Ротати (180DEG); } .photo-front .photo-wrap {-moz-transform: rotatey (0deg); -Webkit-transform: rotatey (0deg); преобразование: rotatey (0deg); } .photo-back .photo-wrap {-moz-transform: rowatey (180deg); -Вебкит-трансформ: Rotatey (180deg); Преобразование: Ротати (180DEG); } /*Стиль кнопки управления* / .nav {ширина: 40%; Высота: 30px; высота линии: 30px; позиция: абсолютно; Слева: 30%; Внизу: 20px; Z-Index: 999; /*Фоно-цвета: #fff;*/ text-align: center; } /*Нормальный стиль* / .nav .i {width: 30px; Высота: 30px; дисплей: встроенный блок; курсор: указатель; фоновый цвет: #AAA; Текст-альбом: Центр; граница радий: 50%; -Моз-трансформ: масштаб (.48); -Вебкит-трансформация: масштаб (.48); Преобразование: масштаб (.48); -Вебкит-транзиция: все 1s; -Моз-трансляция: все 1s; } .nav .i: After {} /*В настоящее время выбран стиль* / .nav .i_current {-moz -transform: scale (1); -Вебкит-трансформ: масштаб (1); } .nav .i_current: после {opacity: 1; } /*Back {-moz-transform: rotatey (-180deg); -Webkit-transform: rotatey (-180Deg); фоновый цвет:#555; }/*Оптимизация стиля,*/ .photo {/*Определение ниже предназначено для устранения внезапных вспышек изображений*/ слева: 50%; Верх: 50%; Покрас: -160px 0 0 -130px; } .photo-wrap {-moz-transform-origin: 0% 50%; -Вебкит-трансформ-аоригин: 0% 50%; / -Webkit-transform: transtate (0px, 0px) rotatey (0deg); } .photo-back .photo-wrap {-moz-transform: transtate (260px, 0px) rotatey (180deg); -Webkit-transform: transtate (260px, 0px) rotatey (180deg); }Вот некоторые важные части стиля.
Настройки в случае: -Webkit-persperive: 800px;
Вы можете увидеть эффект установления этого, а затем установить Rotatey (45deg). Если -ветбкит -трансформация не установлен, эффект вращения не будет отображаться. Вращение изображения просто вращается на плоскости. Если он установлен слишком мал, эффект будет следующим:
Div.Photo отвечает за перевод и вращение изображения, в то время как Div.Photo-WRAP отвечает за 3D FLIP (передняя и задняя переключение). Чтобы позволить элементам внутри 3D-эффектов, устанавливает -вккит-трансформный стиль: reverve-3d для Div.photo-wrap.
.photo-wrap .side-style -webkit-backface-visibubule: скрыто; Цель этого предложения состоит в том, чтобы скрыть, когда элемент не обращается к экрану.
Чтобы сделать изображение перемещать и сбросить эффект анимации, установите -ветбкит-транзицию для .photo-wrap: давайте посмотрим на объяснение перехода ниже:
Навигационный бар стиль
/*Нормальный стиль*/ .nav .i {ширина: 30px; Высота: 30px; дисплей: встроенный блок; курсор: указатель; фоновый цвет: #AAA; Текст-альбом: Центр; граница радий: 50%; -Моз-трансформ: масштаб (.48); -Вебкит-трансформация: масштаб (.48); преобразование: масштаб (.48); -Вебкит-транзиция: все 1s; -Моз-трансляция: все 1s; } /*В настоящее время выбран стиль* / .nav .i_current {-moz -transform: scale (1); -Вебкит-трансформ: масштаб (1); } .nav .i_current: после {opacity: 1; } /*Back Style* / .nav .i_back {-moz-transform: rotatey (-180deg); -Webkit-transform: rotatey (-180Deg); фоновый цвет:#555; }Схема анализа навигационной панели:
Кнопки навигационной панели также разделены на спереди и сзади. Чтобы отличить эффекты передней и сзади, они должны иметь разные фоновые цвета, и в то же время эффект FLIP устанавливается для уменьшения нормальной кнопки - преобразование: масштаб (.48), и когда кнопка выбрана, масштаб (1). Причина увеличения и выхода из кнопки состоит в том, чтобы точно знать, будет ли общий стиль уничтожен при выборе текущей кнопки.
После того, как все основные стили устанавливаются, будут сделаны некоторые оптимизации. Чтобы картинка выглядела слегка смещена вправо, как дверь при переключении спереди и сзади, вы можете добавить следующий стиль:
/*Оптимизация стиля,*/ .photo {/*Определение ниже, чтобы устранить внезапные вспышки изображений*/ слева: 50%; Верх: 50%; Покрас: -160px 0 0 -130px; } .photo-wrap {-moz-transform-origin: 0% 50%; -Вебкит-трансформ-аоригин: 0% 50%; / -Webkit-transform: transtate (0px, 0px) rotatey (0deg); } .photo-back .photo-wrap {-moz-transform: transtate (260px, 0px) rotatey (180deg); -Webkit-transform: transtate (260px, 0px) rotatey (180deg); }Раздел данных
Данные в основном записаны в data.js. Массив данных определяется в Data.js для хранения информации о 22 изображениях. Структура вывода массива данных заключается в следующем:
Каждый объект, хранящийся в данных, включает в себя три атрибута: заголовок, DESC и IMG. Содержание каждого объекта, хранящегося в данных, выводится следующим образом. Часть данных в основном используется для замены строк в шаблонах.
Содержание data.js заключается в следующем:
var Data = []; var datastr = '1. Фото 1 <br>/<br>/зеленые овощи <br>/<br>/<br>/2. Фото 2 <br>/<br>/Фото 2 <br>/<br>/<br>/3. Фото 3 <br>/<br>/<br>/<br>/4. Фото 4 <br>/<br>/<br>/<br>/4. Фото 4 <br>/<br>/<br>/5. Фото 5 <br>/<br>/<br>/<br>/<br>/6. Супер милая игрушка маленького медведя <br>/<br>/супер милая игрушка маленького медведя <br>/<br>/>/<br>/<br>/7, фото 7 <br>/<br>/<br>/<br>/8, фото 8 <br>/<br>/<br>/9, фото 9 <br>/<br>/<br>/9, photo 9 <br>/9, photo 9 10 <br>/<br>/<br>/11, фото 11 <br>/<br>/<br>/<br>/12, фото 12 <br>/<br>/<br>/12 <br>/<br>/<br>/13, фото 13 <br>/<br>/<br>/<br>/14, фото 14 <br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/<br>/14, фото 15 <br>/<br>/<br>/<br>/15, фото 15 <br>/<br>/<br>/<br>/16, фото 16 <br>/<br>/<br>/<br>/17, фото 17 <br>/<br>/<br>/<br>/17, фото 17 <br>/<br>/<br>/17, фото. 17 <br>/<br>/<br>/<br>/17, фото 17 <br>/<br>/<br>/<br>/17, фото 17 <br>/<br>/<br>/<br>/18, фото 18 <br>/<br>/Фото 18 <br>/<br>/19, фото 19 <br>/<br>/Фото 19 <br>/19, фото 19 20 <br>/<br>/<br>/photo 20 <br>/<br>/21, фото 21 <br>/<br>/<br>/<br>/<br>/22, фото 22 <br>/<br>/'; // Следующий код - это разделение контента в Datastr на массив данных var d = datastr.split (' <br> <br> <br> <br> <br> <br> '); i ++) {var c = d [i] .split ('<br> <br>'); data.push ({img: 'img'+(i+1)+'. jpg', заголовок: c [0] .split (',') [1], desc: c [1]});}Контроль управления декомпозицией VCD
• Вывод всех содержимого плаката (просмотр шаблона + data)
• Контроль распределения положения (центральное положение, положение обеих сторон)
• Выход и управление управлением (переключатель, Flip)
Выведите все плакаты, выполняют выполнение через массив данных и заполните контент в шаблон.
// 4. Выводить все плакаты var data = data; Функция addPhotos () {var template = $ ('#wrap'). html (); var html = []; var nav = []; for (s в данных) {var _html = template.replace ('{{index}}', s) .replace ('{{img}}', data [s] .img) .replace ('{{caption}}', data [s] .caption) .Replace ('{{decsfation}}', data [s]. html.push (_html); // Каждый постер имеет соответствующую кнопку NAV.Push ('<span ID = "NAV _'+S+'" OnClick = "Turn (this)"> </span>'); } // Записать обратно после прохождения html.push ('<div>'+nav.join ('')+'</div>'); $ ('#wrap'). html (html.join ('' ')); rsort (случайный ([0, data.length])); }Сортировка плаката, диаграмма анализа заключается в следующем:
При сортировке плакатов для левого и правого разделения сначала проанализируйте положение плакатов для левого и правого разделения следующим образом:
Используйте случайные числа для генерации положения левого и верхнего значения текущего плаката
// Создать случайное значение, поддерживая диапазон значений. функция случайная (диапазон) {var max = math.max (range [0], range [1]); var min = math.min (диапазон [0], диапазон [1]); var diff = max-min; var number = math.ceil (math.random ()*diff + min); возвратный номер; } // 6. Рассчитайте диапазон левых и правых разделов {слева: {x: [min, max], y [min, max]}, right {x: [min, max], y: [min, max]}} range () {var ran = {слева: {x: [], y: []}, правый: {x: [], y: []}; var wroub = {w: $ ('#wrap'). width (), // w: 600, h: $ ('#wrom'). height ()} var photo = {w: $ ('. Photo') [0] .clientWidth, h: $ ('. Photo') [0] .clientHeight} ran.left.x = [0 - photo. ran.left.y = [0 - photo.h, wrap.h]; ran.right.x = [wrap.w/2 + photo.w/2, wrap.w + photo.w]; ran.right.y = ran.left.y; Возврат пробежал; }Затем сортируйте плакаты
//5. Сортировка функции плаката rsort (n) {var _photo = $ ('. Photo'); var photos = []; for (var i = 0; i <_photo.length; i ++) {_photo [i] .classname = _photo [i] .classname.replace (// s*photo_center/s*/, ''); _photo [i] .classname = _photo [i] .classname.replace (// s*photo-front/s*/, ''); _photo [i] .classname = _photo [i] .classname.replace (// s*photo-front/s*/, ''); _photo [i] .classname = _photo [i] .classname = _photo [i] .classname.replace (// s*photo-back/s*/, ''); // Потому что как фото-фронт, так и фото-спина заменяются выше, _photo [i] .classname += 'Photo-Front'; _photo [i] .style.left = ''; _photo [i] .style.top = ''; _photo [i] .style ['-moz-transform'] = _photo [i] .style ['transform'] = _photo [i] .style ['-webkit-transform'] = 'rowate (0deg) шкала (1.3)'; photos.push (_photo [i]); } // var photo_center = $ ('#photo _'+n) [0]; var photo_center = document.getElementbyId ('photo _'+n); var newclass = photo_center.classname + 'photo_center'; //console.log(photo_center.attr('class ')); photo_center = photo.splice (n, 1) [0]; //photo_center.classname = newclass; $ ('#photo _'+n) .attr ('class', newclass); // Разделите оставшийся плакат на две части var photos_left = photos.splice (0, math.ceil (photos.length/2)); var photos_right = photo; var janges = range (); // Сортировка левого раздела для (s в photos_left) {var photo = photos_left [s]; photo.style.left = random (ranges.left.x) + 'px'; photo.style.top = random (ranges.left.y) + 'px'; photo.style ['-moz-transform'] = photo.style ['transform'] = photo.style ['-webkit-transform'] = 'rotate ('+случайный ([-150,150])+'deg) шкала (1)'; } // Правильное разбиение сортировки для (s в photos_right) {var photo = photos_right [s]; photo.style.left = random (ranges.right.x) + 'px'; photo.style.top = random (ranges.right.y) + 'px'; photo.style ['-moz-transform'] = photo.style ['transform'] = photo.style ['-webkit-transform'] = photo.style ['-webkit-transform'] = photo.style ['-webkit-transform'] = 'rowte ('+случайный ([-100,100])+'deg) Scale (1)'; } // обработка кнопки управления var navs = $ ('. I'); for (var i = 0; i <navs.length; i ++) {navs [i] .classname = navs [i] .classname.replace (// s*i_current/s*/, ''); NAVS [i] .className = NAVS [i] .className.Replace (// s*i_back/s*/, ''); } // Добавить стиль i_current $ ('#nav _' +n) [0] .classname += 'i_current'; }Эффект переключения передней и задней стороны плаката и эффект переключения кнопки управления:
функция поворота (elem) {var cls = elem.classname; var n = elem.id.split ('_') [1]; if (! (/photo_center/.test (cls))) {rsort (n); } // ClassName изменяется после выполнения оператора IF, выше, потому что я не хочу этого // всегда отсутствует класс photo_center var cs = $ ('#photo _'+n) [0]; cls = cs.classname; if (/photo-front/.test (cls)) {cls = cls.replace (/photo-front/, 'photo-back'); $ ('#Nav _' +n) [0] .className += 'i_back'; } else {cls = cls.replace (/photo-back/, 'photo-front') $ ('#nav _'+n) [0] .classname = $ ('#nav _'+n) [0] .classname.replace (// s*i_back/s*/, ''); } cs.classname = cls; }Вы можете понять, какой плакат является отображаемым в настоящее время плакатом на основе n in rsort (n), и вы также можете знать, какая кнопка является выбранной в настоящее время кнопкой.
Вышеуказанное является соответствующим анализом эффекта.
Суммировать:
Идеи и методы для анализа случаев:
• Метод анализа модуля
• Метод анализа VCD
Некоторые новые эффекты CSS
• 3D View Settings и поддержка 3D-субэлементов
• Скрыть при переворачивании невидимого
• Используйте вращение CSS (ось Y) и смещение
• CSS переключение анимации
Фронтовые навыки сценариев
• Простая функция шаблона для замены строки
• Получить несколько случайных чисел в соответствии с диапазоном
• Используйте сценарии, чтобы переключить классное имя элемента и конкретные атрибуты стиля
Во время процесса реализации проблема, с которой я столкнулся, заключалась в том, что при переворачивании изображения обратная сторона не может быть скрыта в Firefox. То есть есть проблема со следующим кодом, и он был проверен в течение длительного времени.
.photo-wrap .side {-moz-backface-visibuilt: hidden; -Вебкит-образец видимости: скрыто; Задняя видимость: скрыто;}Оказывается: я пропустил стиль преобразования: заповедник-3D . Поэтому при совместимости браузера не забудьте писать стили без префикса
.photo-wrap {position: Absolute; Ширина: 100%; высота: 100%; -Моз-трансформ в стиле: страда-3D; -Webkit-transform-style: reverve-3d;/*Пусть элементы внутри поддерживают эффект 3d*/<span style = "color:#cc0000;">-стиль преобразования: заповедник-3d;/*Из-за этого предложения, задняя часть Firefox не может быть отображена*/</span> -webkit-transition: все 1s; -Моз-трансляция: все 1s; Переход: все 1s; }Наконец, прикреплен полный код JS:
<script type = "text/javaScript"> // генерировать случайное значение случайным образом, поддерживая диапазон значений.random ([min, max]); функция случайная (диапазон) {var max = math.max (range [0], range [1]); var min = math.min (диапазон [0], диапазон [1]); var diff = max-min; var number = math.ceil (math.random ()*diff + min); возвратный номер; } // 4. Выводить все плакаты var data = data; Функция addPhotos () {var template = $ ('#wrap'). html (); var html = []; var nav = []; for (s в данных) {var _html = template.replace ('{{index}}', s) .replace ('{{img}}', data [s] .img) .replace ('{{caption}}', data [s] .caption) .Replace ('{{decsfation}}', data [s]. html.push (_html); // Каждый постер имеет соответствующую кнопку NAV.Push ('<span ID = "NAV _'+S+'" OnClick = "Turn (this)"> </span>'); } html.push ('<div>'+Nav.join ('')+'</div>'); $ ('#wrap'). html (html.join ('' ')); rsort (случайный ([0, data.length])); } addPhotos () // 6. Рассчитайте диапазон левых и правых разделов {слева: {x: [min, max], y [min, max]}, right {x: [min, max], y: [min, max]}} range () {var ran = {слева: {x: [], y: []}, правый: {x: [], y: []}; var wroub = {w: $ ('#wrap'). width (), // w: 600, h: $ ('#wrom'). height ()} var photo = {w: $ ('. Photo') [0] .clientWidth, h: $ ('. Photo') [0] .clientHeight} ran.left.x = [0 - photo. ran.left.y = [0 - photo.h, wrap.h]; ran.right.x = [wrap.w/2 + photo.w/2, wrap.w + photo.w]; ran.right.y = ran.left.y; Возврат пробежал; } // 5. Сортировка функции плаката rsort (n) {var _photo = $ ('.. Photo'); var photos = []; for (var i = 0; i <_photo.length; i ++) {_photo [i] .classname = _photo [i] .classname.replace (// s*photo_center/s*/, ''); _photo [i] .classname = _photo [i] .classname.replace (// s*photo-front/s*/, ''); _photo [i] .classname = _photo [i] .classname.replace (// s*photo-back/s*/, ''); _photo [i] .classname = _photo [i] .classname.replace (// s*photo-back/s*/, ''); // Поскольку вышеупомянутое заменило как фото-фронт, так и фото-спинку, _photo [i] .classname += 'photo-front'; _photo [i] .style.left = ''; _photo [i] .style.top = ''; _photo [i] .style ['-moz-transform'] = _photo [i] .style ['transform'] = _photo [i] .style ['-webkit-transform'] = 'rowate (0deg) шкала (1.3)'; photos.push (_photo [i]); } // var photo_center = $ ('#photo _'+n) [0]; var photo_center = document.getElementbyId ('photo _'+n); var newclass = photo_center.classname + 'photo_center'; //console.log(photo_center.attr('class ')); photo_center = photo.splice (n, 1) [0]; //photo_center.classname = newclass; $ ('#photo _'+n) .attr ('class', newclass); // Разделение оставшегося плаката на две части var photos_left = photos.splice (0, math.ceil (photos.length/2)); var photos_right = photo; var janges = range (); // Сортировка левого раздела для (s в photos_left) {var photo = photos_left [s]; photo.style.left = random (ranges.left.x) + 'px'; photo.style.top = random (ranges.left.y) + 'px'; photo.style ['-moz-transform'] = photo.style ['transform'] = photo.style ['-webkit-transform'] = 'rotate ('+случайный ([-150,150])+'deg) шкала (1)'; } // Сортировка правого раздела для (s в photos_right) {var photo = photos_right [s]; photo.style.left = random (ranges.right.x) + 'px'; photo.style.top = random (ranges.right.y) + 'px'; photo.style ['-moz-transform'] = photo.style ['transform'] = photo.style ['-webkit-transform'] = 'utate ('+случайный ([-100,100])+'deg) шкала (1)'; } // обработка кнопки управления var navs = $ ('. I'); for (var i = 0; i <navs.length; i ++) {navs [i] .classname = navs [i] .classname.replace (// s*i_current/s*/, ''); NAVS [i] .className = NAVS [i] .className.Replace (// s*i_back/s*/, ''); } // Добавить стиль i_current $ ('#nav _' +n) [0] .classname += 'i_current'; } функция Turn (elem) {var cls = elem.classname; var n = elem.id.split ('_') [1]; if (! (/photo_center/.test (cls))) {rsort (n); } // ClassName изменяется после выполнения оператора IF выше, потому что я не хочу этого // класса photo_center var cs = $ ('#photo _'+n) [0]; cls = cs.classname; if (/photo-front/.test (cls)) {cls = cls.replace (/photo-front/, 'photo-back'); $ ('#Nav _' +n) [0] .className += 'i_back'; } else {cls = cls.replace (/photo-back/, 'photo-front') $ ('#nav _'+n) [0] .classname = $ ('#nav _'+n) [0] .classname.replace (// s*i_back/s*/, ''); } cs.classname = cls; } </script>Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.