以下是我自己用原生JS写的各种菜单特效,虽然网上一搜一大堆,但我还是喜欢自己来写一写!
这是上一篇:JavaScript实战(带收放动画效果的导航菜单)
下面是经过优化后的完整代码,优化了CSS样式、简化事件函数、减少HTML层级,删了至少20行以上的冗余代码
如果各位前辈有好的建议,记得一定留下你的宝贵意见!

window.onload = function() { //========伸缩动画菜单 var ul = document.getElementById('ul'); if(ul.addEventListener){ ul.addEventListener('mouseover',listener1,true); ul.addEventListener('mouseout',listener2,true); ul.addEventListener('click',listener3,false); }else if(ul.attachEvent){ //兼容IE8及以前版本 ul.attachEvent('onmouseover',listener1,false); ul.attachEvent('onmouseout',listener2,false); ul.attachEvent('onclick',listener3,false); } function listener1(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; } } function listener2(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; function listener3(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, changeH, opacity, id; if (bool) { changeH = 0; opacity = 0; var text = target.innerHTML.slice(0,-1); target.innerHTML = text+' -'; (function show() { if (changeH > height) {clearTimeout(id);return} changeH += 5; opacity += 0.06; console.log('opacity:'+adiv.style.opacity+',height :'+adiv.style.height); adiv.style.height = changeH + 'px'; adiv.style.opacity = opacity; adiv.style.display = 'block'; id = setTimeout(function () { clearTimeout(id); show(); }, 16.7); })(); bool = false; } else { changeH = height; opacity = 1; var text = target.innerHTML.slice(0,-1); target.innerHTML = text+' +'; (function hidden() { if (changeH *{ margin: 0; padding: 0; } a,img{border:0;} ul{ position: absolute; top: 20px; left: 30px; z-index: 100; } #ul li{ display: inline-block; position: relative; height: 30px; text-align: center; line-height: 30px; padding: 3px; border: 1px solid gray; border-radius: 10px 10px 0 0; background-color: aliceblue; cursor: pointer; -webkit-transition: all ease-in-out 0.3s; -moz-transition: all ease-in-out 0.3s; -ms-transition: all ease-in-out 0.3s; -o-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } #ul li:hover{background-color: aquamarine;} .nav-div{ position: absolute; width: 100%; left: -1px; top: 37px; display: none; border: 1px solid gray; border-top: 0; border-radius:0 0 10px 10px; background-color: aliceblue; } .show-hide{ position: relative; display: block; border-radius:0 0 10px 10px; background-color: lightblue; -webkit-transition: all ease-in-out 0.3s; -moz-transition: all ease-in-out 0.3s; -ms-transition: all ease-in-out 0.3s; -o-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; border-bottom: 1px solid gray; } .show-hide:hover{background-color: lavender} .a-div{ background-color: aliceblue; display: none; border-radius:0 0 10px 10px; opacity: 0} .a{ z-index: -1; display: block; text-decoration: none; border-radius:10px; -webkit-transition: all ease-in-out 0.3s; -moz-transition: all ease-in-out 0.3s; -ms-transition: all ease-in-out 0.3s; -o-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } .a:hover{background-color: lavender}

下面是第二个特效:(具体实现比第一个简单很多,主要注意CSS布局)

*{ margin: 0; padding: 0; } a,img{border:0;} #menu{ position: absolute; top: 30px; left: 0; right: 0; margin: auto; width: 400px; border-left: 1px solid gray; border-top: 1px solid gray; background-color: lemonchiffon; text-align: center; } #menu li{ list-style: none; float: left; width: 99px; height: 30px; line-height: 30px; border-right: 1px solid gray; background-color: burlywood; color: white; -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; -ms-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s; } #menu li:hover{ background-color: lemonchiffon; color: #336699; } .contain{ position: absolute; left: -1px; display: none; width: 399px; height: 300px; color: #336699; border-left: 1px solid gray; border-right: 1px solid gray; border-bottom: 1px solid gray; background-color: lemonchiffon; } 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'; } } function hide(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'; } } }

  • 苏福的特效1
    111111111111
  • 苏福的特效2
    222222222222
  • 苏福的特效3
    333333333333
  • 苏福的特效4
    444444444444

随机推荐

  1. java 、android 知识图谱

    java知识图谱: android知识图谱: 照此图练习,神功自成.....

  2. BZOJ 3725

    Description 有一堵长度为n的墙需要刷漆,你有一把长度为k的刷子.墙和刷子都被均匀划分成单位长度的小格,刷子的每一格中都沾有某种颜色(纯色)的漆.你需要用这把刷子在墙上每一个可能的位置(只要 ...

  3. Haskell 输入和输出

    我们已经说明了 Haskell 是一个纯粹函数式语言.虽说在命令式语言中我们习惯给电脑执行一连串指令,在函数式语言中我们是用定义东西的方式进行.在 Haskell 中,一个函数不能改变状态,像是改变一 ...

  4. JQuery slideToggle 演示简单的 Slide Panel 效果。

    ------------------html--------------------------------- <html xmlns="http://www.w3.org/1999/ ...

  5. iOS开发下架在AppStore中销售的app

    1.登陆开发者账号 2.选择itunes connect 选择我的app 3.选择要下架的app 4.价格与销售范围 5.销售范围 6.点击存储 //如果想要重新在AppStore中进行销售只需要选择 ...

  6. Ubuntu 环境 samba的安装&amp;配置

    一.samba的安装: sudo apt-get install samba sudo apt-get install smbfs sudo apt-get install cifs-utils (新 ...

  7. Ubuntu 16.04 安装opencv3.4.5/cuda/caffe并使用jni笔记

    因操作失误,误卸开发机NVIDIA显卡驱动,先更新操作日志如下: 1>NVIDIA驱动重装 1.卸载系统里的Nvidia残余 sudo apt-get purge nvidia* 2.把显卡驱动 ...

  8. 华为QUIDWAY系列路由器的单臂路由配置案例

    作者:邓聪聪 单臂路由 单臂路由(router-on-a-stick)是指在路由器的一个接口上通过配置子接口(或“逻辑接口”,并不存在真正物理接口)的方式,实现原来相互隔离的不同VLAN(虚拟局域网) ...

  9. spring 获取对象的注解

    BeanDefinition definition = registry.getBeanDefinition(name); if (definition instanceof AnnotatedBea ...

  10. pycharm快捷键及中文说明【使用翻译工具一条一条翻译】

    Search Everywhere: Double Shift Go to File : Ctrl+Shilf+N Recent Files: Ctrl+E Navigation Bar: Alt+H ...