JavaScript实战之菜单特效

184 阅读 0 评论 122 点赞

我是靠谱客的博主激昂水杯，最近开发中收集的这篇文章主要介绍JavaScript实战之菜单特效，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文将持续添加我自己用原生JS写的各种菜单特效，虽然网上一搜一大堆，但我还是喜欢自己来写一写！
这是上一篇：JavaScript实战（带收放动画效果的导航菜单）
下面是经过优化后的完整代码，优化了CSS样式、简化事件函数、减少HTML层级，删了至少20行以上的冗余代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <script>
 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 < 0) {clearTimeout(id);adiv.style.display = 'none';return}
  changeH -= 10;
  opacity -= 0.11;
  console.log('opacity:'+adiv.style.opacity+',height :'+adiv.style.height);
  adiv.style.height = changeH + 'px';
  adiv.style.opacity = opacity;
  id = setTimeout(function () {
  clearTimeout(id);
  hidden();
  }, 16.7);
  })();
  bool = true;
  }
 }
 }
 };
 </script>
 <style>
 *{
 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}
 </style>
</head>
<body>
<ul id="ul">
 <li>JavaScript实战
 <div class="nav-div">
 <span class="show-hide">导航特效 +</span>
 <div class="a-div">
 <a class="a" href="">可收放子菜单</a>
 <a class="a" href="">切换页面</a>
 <a class="a" href="">持续添加中...</a>
 </div>
 <span class="show-hide">其它特效 +</span>
 <div class="a-div">
 <a class="a" href="">持续添加中...</a>
 <a class="a" href="">持续添加中...</a>
 <a class="a" href="">持续添加中...</a>
 </div>
 </div>
 </li>
 <li>JavaScript性能优化
 <div class="nav-div">
 <span class="show-hide">财经 +</span>
 <div class="a-div">
 <a class="a" href="">今日头条</a>
 <a class="a" href="">所有新闻</a>
 <a class="a" href="">往日回看</a>
 </div>
 <span class="show-hide">科技 +</span>
 <div class="a-div">
 <a class="a" href="">今日头条</a>
 <a class="a" href="">所有新闻</a>
 <a class="a" href="">往日回看</a>
 </div>
 </div>
 </li>
 <li>今日新闻
 <div class="nav-div">
 <span class="show-hide">财经 +</span>
 <div class="a-div">
 <a class="a" href="">今日头条</a>
 <a class="a" href="">所有新闻</a>
 <a class="a" href="">往日回看</a>
 </div>
 <span class="show-hide">科技 +</span>
 <div class="a-div">
 <a class="a" href="">今日头条</a>
 <a class="a" href="">所有新闻</a>
 <a class="a" href="">往日回看</a>
 </div>
 </div>
 </li>
</ul>
</body>
</html>

效果图：

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 *{
  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;
 }
 </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';
  }
  }
  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';
  }
  }
 }
 </script>
</head>
<body>
<div id="menu">
 <ul>
 <li id="menu1">苏福的特效1
  <div class="contain">111111111111</div>
 </li>
 <li id="menu2">苏福的特效2
  <div class="contain">222222222222</div>
 </li>
 <li id="menu3">苏福的特效3
  <div class="contain">333333333333</div>
 </li>
 <li id="menu4">苏福的特效4
  <div class="contain">444444444444</div>
 </li>
 </ul>
</div>
</body>
</html>

效果图：