本文实例为大家分享了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="https://www.atool.online/article/css/common.css" /> <script src="https://www.atool.online/article/js/move.js"></script> <script src="https://www.atool.online/article/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-color: red; */ 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: url(../images/1.jpg) 0 5px no-repeat; */ background-position: 0 5px; } #box div a.a02{ /* background: url(../images/1.jpg) 0 5px no-repeat; */ background-position: -200px 5px; } #box div a.a03{ /* background: url(../images/1.jpg) 0 5px no-repeat; */ background-position: -400px 5px; } #box div a.a04{ /* background: url(../images/1.jpg) 0 5px no-repeat; */ 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}) } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。