Все видели жалюзи! Как показано на картинке:
принцип:
Как показано на рисунке, полая решетка похожа на каждый LI. Установите относительные атрибуты позиционирования для него и установите переполнение: скрыто; Черный блок - это детский элемент Li с высотой в 2 раза больше Li, и устанавливает абсолютный атрибут. Мы хотим изменить его высшее значение, чтобы получить изменения! (Дополнительный блок в правом верхнем углу не имеет ничего общего с этой картиной)
Анализ макета:
Обратите внимание, что Top стоит менять! Когда топ по умолчанию = 0 равен 0, отображается «первый этаж наверх». Когда топ = -40px, дочерние элементы Li перемещаются до 40 пикселей. В настоящее время отображаемый контент находится «Первый этаж внизу». Обратите внимание на P-элемент-слой div
JS -анализ:
1. включите несколько таймеров, чтобы достичь эффекта
2. Выполнить в противоположном направлении
3. Выполните несколько наборов упражнений
4. накопление создает ощущение ошеломляющего
5. генерировать анимацию интервала времени
Код JS выглядит следующим образом:
<script> window.onload = function () {var oul = document.getElementById ('ul1'); var oul2 = document.getElementById ('ul2'); Тошау (OUL); // Выполнить setTimeout (function () {toshow (oul2);}, 4000); функция toshow (oshj) {var adiv = obj.getElementsbytagname ('div'); var inow = 0; var timer = null; var bbtn = true; setInterval (function () {tochange ();}, 2000); Function tochange () {timer = setInterval (function () {if (inow == adiv.length) {clearInterval (timer); inow = 0; bbtn =! bbtn;} else if (bbtn) {startmove (adiv [inow], {top: 0}, function () {var p = document.getlementsbyclementsby I = 0; }}}}; // функция движения frame startMove (obj, json, endfn) {clearInterval (obj.timer); obj.timer = setInterval (function () {var bbtn = true; для (var attr in json) {var icur = 0; icur = parseint (getStyle (obj, attr)) || 0; var ispeed = (json [attr] - icur)/8; ispeed = ispeed> 0? icur! = json [attr]) {bbtn = false; } // Получить функцию нелинейного стиля getStyle (obj, attr) {if (obj.currentStyle) {return obj.currentStyle [attr]; } else {return getComputEdstyle (obj, false) [attr]; }} </script>Адрес загрузки: JS для достижения жалюзи
Вышеуказанное посвящено этой статье, и я надеюсь, что всем будет полезно научиться реализовать эффект жалюзи JS.