这篇“js怎么实现导航栏上下动画效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“js怎么实现导航栏上下动画效果”文章吧。
obj.currentStyle[name] 与 getComputedStyle(obj,false)[name]，一个是支持IE 一个支持FE
完美运动js插件，能根据传进来的值，进行匹配，从而得到了理想的运动效果，也就是运行逻辑。
实现上下动画动画效果就是控制元素height的值，通过不断的修改该值，就能呈现所谓的动画效果，这里就需要用到定时器
定时器有两种
重复不断的定时器 setInterval(fn,time);
延时只在设定时间后只出现一次的定时器 setTimeout(fn,time)
在遍历传进的每一个值，需要使用一个boolean来控制是否完成解析，解析成功则返回true，结束定时器，返回false,知道返回true位置
function getStyle(obj, attr){ if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; }}function startMove(obj,json,fnEnd){ if(obj.timer){ clearInterval(obj.timer); }; obj.timer=setInterval(function(){ var bStop = true; //假设全部找到 for(var attr in json){ var icurr = 0; if(attr=='opacity'){//匹配key icurr=Math.round(parseFloat(getStyle(obj,attr))*100); //获取元素的属性值 }else{ icurr=parseInt(getStyle(obj,attr)); }; var sPeed = (json[attr]-icurr)/8; sPeed=sPeed>0?Math.ceil(sPeed):Math.floor(sPeed); if(attr=='opacity'){ obj.style.filter="alpha(opacity:"+(icurr+sPeed)+")"; obj.style.opacity=(icurr+sPeed)/100; }else{ obj.style[attr]=icurr+sPeed+'px'; } if(icurr!=json[attr]){ bStop=false; } } if(bStop){ clearInterval(obj.timer); if(fnEnd){ fnEnd(); } } },30);}// alert('dffe');html布局
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" type="text/css" href="css/common.css" /><script src="js/move.js"></script><script src="js/common.js"></script><title></title></head><body><div id="box"><div><a href="javascript:;" class="a01"></a><em>关于</em><span></span></div><div><a href="javascript:;" class="a02"></a><em>招聘</em><span></span></div><div><a href="javascript:;" class="a04"></a><em>产品</em><span></span></div><div><a href="javascript:;" class="a03"></a><em>公司</em><span></span></div></div></body></html>css文件
*{ margin: 0; padding: 0;}a{ text-decoration: none;}body{ background-color: #c1c1c1;}#box{ width: 880px; margin: 100px auto; overflow: hidden;}#box div{ width: 200px; height: 100px; float: left; overflow: hidden; position: relative;}#box div a{ position: absolute; left: 0; top: 0; width: 200px; height: 100px; display: block; background: url(../images/1.jpg) no-repeat;}#box div span{ display: block; width: 200px; height: 100px; position: absolute; background: url(../images/window.png) left top repeat-x;}#box div em{ display: block; width: 100%; height: 100%; background-color: #999; position: absolute; text-align: center; line-height: 100px; font-family: Verdana; font-style: normal; font-size: 30px; color: white; text-shadow: 2px 1px 4px black; top: 0;}#box div a.a01{ background-position: 0 5px;}#box div a.a02{ background-position: -200px 5px;}#box div a.a03{ background-position: -400px 5px;}#box div a.a04{ background-position: -600px 5px;}window.οnlοad=fn
window.onload=function(){ var oDiv = document.getElementById('box'); var aDiv = oDiv.getElementsByTagName('div'); var aEm = oDiv.getElementsByTagName('em'); var aEm = oDiv.getElementsByTagName('em'); for(var i=0;i<aDiv.length;i++) { aDiv[i].index = i; aDiv[i].onmouseover = function() { startMove(aEm[this.index],{top:-aEm[this.index].offsetHeight}) } aDiv[i].onmouseout = function() { startMove(aEm[this.index],{top:0}) } }}以上就是关于“js怎么实现导航栏上下动画效果”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。
