Эта статья будет продолжать добавлять различные эффекты меню, которые я написал в Native JS. Хотя я много искал в Интернете, я все еще люблю писать сам!
Это предыдущая статья: JavaScript Practical Bight (меню навигации с сбором и выпуском эффектов анимации)
Ниже приведено оптимизированный полный код, оптимизированный стиль CSS, упрощенные функции события, снижение уровней HTML и удалил не менее 20 строк избыточного кода.
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <script> window.onload = function () {// ========== Меню анимации масштабирования varul = document.getElementbyid ('ul'); if (ul.addeventlistener) {ul.addeventlistener ('mouseover', stirler1, true); Ul.AddeventListener ('Mouseout', Slister2, True); Ul.AddeventListener ('Щелкни, слушатель3, false); } else if (ul.attachevent) {// Совместимо с IE8 и предыдущими версиями ul.attachevent ('onmouseover', slister1, false); ul.attachevent ('onmouseout', slister2, false); ul.attachevent ('onclick', stirler3, false); } функция прослушивание1 (event) {// event = event || window.event; // Совместим с IE8 и предыдущими версиями var target = event.target || event.srcelement; // Совместим с IE8 и предыдущими версиями if (target.tagname.tolowercase () === 'li') {var div1 = target.getelementsbytagname ('div') [0]; div1.style.display = 'block'; div1.style.opacity = 1; }} функция прослушивание2 (event) {// event = event || window.event; var target = event.target || event.srcelement; if (target.tagname.tolowercase () === 'li') {var div1 = target.getelementsbytagname ('div') [0]; div1.style.display = 'none'; div1.style.opacity = 0; div1.onmouseover = function () {div1.style.display = 'block'; div1.style.opacity = 1; }; div1.onmouseout = function () {div1.style.display = 'none'; div1.style.opacity = 0; }; }} var bool = true; Функция прослушивания3 (event) {var event = event || window.event; var target = event.target || Event.srcelement; if (target.classname === 'show-hide') {var adiv = target.nextelementsibling; if (window.getComputedStyle (adiv, null) .opacity> 0.5) {bool = false} else {bool = true} var height = 90, изменениех, непрозрачность, id; if (bool) {changeh = 0; непрозрачность = 0; var text = target.innerhtml.slice (0, -1); target.innerhtml = text+' -'; (function show () {if (изменение> высота) {cleartimeout (id); return} woodh += 5; непрозрачность += 0,06; консоль.log ('непрозрачность:' +adiv.style.opacity +', height:' +Adiv.style.height); adiv.style.display = 'block'; bool = false; } else {changeh = height; непрозрачность = 1; var text = target.innerhtml.slice (0, -1); target.innerhtml = text +' +'; (function hidden () {if (изменение <0) {cleartimeout (id); adiv.style.display = 'none'; return} изменение adiv.style.opacity = opacity; bool = true; }}}}}}; </script> <style> *{margin: 0; Заполнение: 0; } a, img {border: 0;} ul {position: Absolute; Верх: 20px; Слева: 30px; Z-Index: 100; } #ul li {display: inline-block; позиция: относительно; Высота: 30px; Текст-альбом: Центр; высота линии: 30px; Заполнение: 3PX; Граница: 1px сплошной серый; граница-радий: 10px 10px 0 0; Фоно-цвета: Aliceblue; курсор: указатель; -Вобкит-трансляция: все простой 0,3 с; -Моз-трансляция: все легкость в 0,3 с; -Сс-транзирование: все легкость в 0,3 с; -О-транзиция: все легкость 0,3 с; Переход: все простой 0,3 с; } #ul li: Hover {founal-color: aquamarine;} .nav-div {position: Absolute; Ширина: 100%; слева: -1px; Верх: 37px; дисплей: нет; Граница: 1px сплошной серый; пограничная топ: 0; граница радий: 0 0 10px 10px; Фоно-цвета: Aliceblue; } .show-hide {позиция: относительно; дисплей: блок; граница радий: 0 0 10px 10px; Фоно-цвета: LightBlue; -Вобкит-трансляция: все простой 0,3 с; -Моз-трансляция: все легкость в 0,3 с; -Сс-транзирование: все легкость в 0,3 с; -О-транзиция: все легкость 0,3 с; Переход: все простой 0,3 с; Пограничный подвод: 1px сплошной серый; } .show-hide: hover {фоновое цветное: lavender} .a-div {background-color: aliceblue; дисплей: нет; граница радий: 0 0 10px 10px; непрозрачность: 0} .a {z -index: -1; дисплей: блок; Текстовое декорация: нет; граница радий: 10px; -Вобкит-трансляция: все простой 0,3 с; -Моз-трансляция: все легкость в 0,3 с; -Сс-транзирование: все легкость в 0,3 с; -О-транзиция: все легкость 0,3 с; Переход: все простой 0,3 с; } .a: Hover {founal-color: lavender} </style> </head> <body> <ul id = "ul"> <li> javascript practical <div> <pan> навигационные эффекты+</span> <div> <a href = ""> можно ввести и размещать подменю </a> <a href = ">" Добавление ... </a> </div> <pan> Другие спецэффекты+</span> <div> <a href = ""> непрерывно добавление ... </a> <a href = ""> Непрерывное добавление ... </a> <a href = ""> Непрерывное добавление ... </a> <a href = ""> Непрерывное добавление ... </aaVict> </liaVcript> <liaScript> <liaVcript> </liaVcript> </liavcripcript> <pran> financial+</span> <div> <a href = ""> сегодняшние заголовки </a> <a href = ""> все новости </a> <a href = ""> Предыдущий обзор </a> </div> <span> technology+</span> <Div> <a href = "> href ="> href = "> href ="> href = ""> обзор прошлого </a> </div> </li> <li> Сегодняшние новости <Div> <pan> financial+</span> <div> <a href = ""> сегодняшние заголовки </a> <a href = ""> Все новости </a> <a href = ""> Все новости </a> <a href = "> revelode of the Pastef =" "> Dives </href </href =" "> Dives </a> <A Href =" <pran> Technology+</span> <div> <a href = ""> Сегодняшние заголовки </a> <a href = ""> Все новости </a> <a href = ""> Обзор прошлого </a> </div> </li> </ul> </body> </html>Изображение воспроизведения:
Ниже приведен второй специальный эффект: (конкретная реализация намного проще, чем первая, в основном обращайте внимание на макет CSS)
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{margin: 0; Заполнение: 0; } a, img {border: 0;} #menu {position: Absolute; Верх: 30px; слева: 0; Справа: 0; Порность: Авто; Ширина: 400px; Слево с границы: 1px твердый серый; Пограничная топ: 1PX сплошной серый; Фоно-цвета: Lemonchiffon; Текст-альбом: Центр; } #menu li {list-style: none; Плавание: осталось; Ширина: 99px; Высота: 30px; высота линии: 30px; граница правая: 1px твердый серый; фоновый цвет: burlywood; Цвет: белый; -Вобкит-трансляция: все простое 0,5 с; -Моз-трансляция: все простой 0,5 с; -Сс-транзирование: все легкость в 0,5 с; -О- Переход: все простое 0,5 с; } #menu li: Hover {founal-Color: Lemonchiffon; Цвет: #336699; } .contain {position: Absolute; слева: -1px; дисплей: нет; Ширина: 399px; Высота: 300px; Цвет: #336699; Слево с границы: 1px твердый серый; граница правая: 1px твердый серый; Пограничный подвод: 1px сплошной серый; Фоно-цвета: Lemonchiffon; } </style> <script> window.onload = function () {var menu = document.getElementbyId ('menu'); if (menu.addeventlistener) {menu.addeventlistener ('mouseover', show, false); Menu.AddeventListener ('Mouseout', Hide, false); } else if (menu.attachevent) {menu.attachevent ('onmouseover', show, false); menu.attachevent ('onmouseout', Hide, false); } function show (event) {var target = event.target || event.srcelement; if (target.tagname.tolowercase () === 'li') {target.firstelementchild.style.display = 'block'; } else if (target.parentnode.tagname.tolowercase () === 'li') {target.style.display = 'block'; }} функция скрыть (event) {var target = event.target || event.srcelement; if (target.tagname.tolowercase () === 'li') {target.firstelementchild.style.display = 'none'; } else if (target.parentnode.tagname.tolowercase () === 'li') {target.style.display = 'none'; } } } </script></head><body><div id="menu"> <ul> <li id="menu1">Siufu's special effects1 <div>111111111111</div> </li> <li id="menu2">Siufu's special effects2 <div>22222222222222222222</div> </li> <li id = "Menu3"> Специальные эффекты Siufu3 <div> 333333333333 </div> </li> <li id = "menu3"> Специальные эффекты Siufu3 <div> 3333333333 </div> </li> <li id = "menu4"> Специальные эффекты Суфу 4 4 эффекты 4 <div> 44444444444444444 </div> </li> </ul> </div> </body> </html>Изображение воспроизведения:
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.