这篇文章会继续添加各种菜单，让我自己用js来写原创，虽然网上搜索了很多，但我还是喜欢自己写的！

这是最后一个：javaｓｃｒｉｐｔ实战（带有动画效果的导航菜单）

下面是优化的代码，它优化了CSS样式，简化了事件函数，减少了HTML级别，并且删除了至少20行冗余代码。








在window.onload =函数（）{
/ / ========伸缩动画菜单
VaR UL = document.getelementbyid（'ul）；
如果（UL。addEventListener）{
Ul.addEventListener（'mouseover '，listener1，真的）；
Ul.addEventListener（'mouseout '，listener2，真的）；
Ul.addEventListener（听到咔哒声，listener3，假）；
} else if（UL认证。attachevent）{ / / IE8，与以前的版本兼容
Ul.attachEvent（'onmouseover '，listener1，假）；
Ul.attachEvent（'onmouseout '，listener2，假）；
Ul.attachEvent（'onclick '，listener3，假）；
}
功能listener1（事件）{
/ /事件=事件| | window.event； / / IE8，与以前的版本兼容
VaR目标=事件。目标| | event.srcelement； / / IE8，与以前的版本兼容
如果（目标。tagname。toLowerCase）（=李）{
VaR DIV1 = target.getelementsbytagname（'div）{ 0 }；
div1.style.display =阻止；
div1.style.opacity = 1；
}
}
功能listener2（事件）{
/ /事件=事件| | window.event；
var =目标目标| | event.srcelement事件；
如果（目标。tagname。toLowerCase）（=李）{
VaR DIV1 = target.getelementsbytagname（'div）{ 0 }；
div1.style.display =不关；
div1.style.opacity = 0；
div1.onmouseover =函数（）{
div1.style.display =阻止；
div1.style.opacity = 1；
}；
div1.onmouseout =函数（）{
div1.style.display =不关；
div1.style.opacity = 0；
}；
}
}
Var bool = true;
功能listener3（事件）{
var =事件| | window.event事件；
VaR目标= event.target event.srcelement | |；
如果（target.classname = 'show-hide）{
VaR艾迪维= target.nextelementsibling；
如果（（艾迪维window.getcomputedstyle，null）。透明度> 0.5）{ bool =假} { } bool =真正的人
var高度= 90，
ChangeH，
不透明度，
身份证件;
如果（bool）{
changeh = 0；
不透明度= 0；
var text = target.innerhtml.slice（0 - 1）；
target.innerhtml =文字+；
（函数显示（）{
如果（changeh >高度）{清除定时器（ID）；返回}
changeh = 5；
不透明度= 0.06；
（'opacity艾迪维console.log：+ +。风格。不透明，艾迪维高度：+。风格。高度）；
adiv.style.height = changeh + 'px；
adiv.style.opacity =不透明；
adiv.style.display =阻止；
ID = setTimeout（）{（）函数（
ClearTimeout（ID）；
显示（）；
}，16.7）；
}）；
bool = false；
{人}
changeh =高度；
不透明度= 1；
var text = target.innerhtml.slice（0 - 1）；
target.innerhtml =文字++；
（函数隐藏（）{
如果（changeh＜0）{清除定时器（ID）；adiv.style.display =不关；回归}
changeh = 10；
不透明度= 0.11；
（'opacity艾迪维console.log：+ +。风格。不透明，艾迪维高度：+。风格。高度）；
adiv.style.height = changeh + 'px；
adiv.style.opacity =不透明；
ID = setTimeout（）{（）函数（
ClearTimeout（ID）；
隐藏（）；
}，16.7）；
}）；
bool =真；
}
}
}
}；


* {
保证金：0；
填充：0；
}
一、img {边界：0；}
UL {
位置：绝对；
上图：20px；
左：30px；
Z指数：100；
}
# ul {
显示：内联块；
职位：相对；
身高：30px；
文本对齐：中心；
行高：30px；
填料：3px；
border: 1px solid灰色；
边界半径：10px 10px 00；
背景颜色：爱丽丝蓝；
光标：指针；
WebKit的过渡：所有缓解了0.3s；
-moz过渡：所有缓解了0.3s；
MS过渡：所有缓解了0.3s；
- O转换：所有缓解了0.3s；
过渡：所有缓解了0.3s；
}
# ul：悬停{背景颜色：海蓝宝石；}
资产净值{ {
位置：绝对；
宽度：100%；
左：- 1px；
上图：37px；
显示：无；
border: 1px solid灰色；
边界顶部：0；
边界半径：0 0 10px 10px；
背景颜色：爱丽丝蓝；
}
显示隐藏{
职位：相对；
显示块；
边界半径：0 0 10px 10px；
背景颜色：浅蓝色；
WebKit的过渡：所有缓解了0.3s；
-moz过渡：所有缓解了0.3s；
MS过渡：所有缓解了0.3s；
- O转换：所有缓解了0.3s；
过渡：所有缓解了0.3s；
底部边框：1px solid灰色；
}
显示隐藏：悬停{背景颜色：薰衣草}
a-div {。
背景颜色：爱丽丝蓝；
显示：无；
边界半径：0 0 10px 10px；
不透明：0 }
一个{。
Z指数：1；
显示块；
文字装饰：无；
边界半径：10px；
WebKit的过渡：所有缓解了0.3s；
-moz过渡：所有缓解了0.3s；
MS过渡：所有缓解了0.3s；
- O转换：所有缓解了0.3s；
过渡：所有缓解了0.3s；
}
答：悬停{背景颜色：薰衣草}




Javaｓｃｒｉｐｔ实战

导航效果+

可伸缩的子菜单
切换页面
连续添加…

其他特殊效果+

连续添加…
连续添加…
连续添加…



Javaｓｃｒｉｐｔ的性能优化

金融+

今天的头条
所有的消息
回顾过去

技术+

今天的头条
所有的消息
回顾过去



今天的新闻

金融+

今天的头条
所有的消息
回顾过去

技术+

今天的头条
所有的消息
回顾过去










设计素描 uff1a


下面是第二个特效：（具体实现比第一个简单得多，主要关注CSS布局）










* {
保证金：0；
填充：0；
}
一、img {边界：0；}
#菜单{
位置：绝对；
上图：30px；
左：0；
权利：0；
保证金：汽车；
宽度：400px；
左：灰色边框1px solid；
边境上：1px solid灰色；
背景颜色：柠檬绸色；
文本对齐：中心；
}
#菜单里{
列表样式：无；
浮点数：左；
宽度：99px；
身高：30px；
行高：30px；
右：灰色边框1px solid；
背景颜色：原木色；
颜色：白色；
WebKit的过渡：所有缓解了0.5s；
-moz过渡：所有缓解了0.5s；
MS过渡：所有缓解了0.5s；
- O转换：所有缓解了0.5s；
过渡：所有缓解了0.5s；
}
李：#菜单悬停{
背景颜色：柠檬绸色；
颜色：# 336699；
}
含有{。
位置：绝对；
左：- 1px；
显示：无；
宽度：399px；
身高：300px；
颜色：# 336699；
左：灰色边框1px solid；
右：灰色边框1px solid；
底部边框：1px solid灰色；
背景颜色：柠檬绸色；
}


在window.onload =函数（）{
菜单= document.getelementbyid（菜单'）；
如果（菜单。addEventListener）{
Menu.addEventListener ('mouseover', show, false);
Menu.addEventListener（'mouseout，隐瞒，虚假）；
} else if（菜单。attachevent）{
menu.attachevent（'onmouseover显示，假）；
menu.attachevent（'onmouseout，隐瞒，虚假）；
}
函数显示（事件）{
var =目标目标| | event.srcelement事件；
如果（目标。tagname。toLowerCase）（=李）{
target.firstelementchild.style.display =阻止；
} else if（目标。parentNode。tagname。toLowerCase）（=李）{
target.style.display =阻止；
}
}
函数隐藏（事件）{
var =目标目标| | event.srcelement事件；
如果（目标。tagname。toLowerCase）（=李）{
target.firstelementchild.style.display =不关；
} else if（目标。parentNode。tagname。toLowerCase）（=李）{
target.style.display =不关；
}
}
}





Sufu的特殊效果1
一千一百一十一亿一千一百一十一万一千一百一十一

Sufu的特殊效果2
二千二百二十二亿二千二百二十二万二千二百二十二

Sufu的特殊效果3
三千三百三十三亿三千三百三十三万三千三百三十三

Sufu的特殊效果4
四千四百四十四亿四千四百四十四万四千四百四十四









设计素描 uff1a


以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。