原生Javascript滑动导航菜单
学到JS动画这块,试着做一些以前觉得很炫的效果,其实思考了、练习了,也就会了,以前太懒,一在要勤奋些学习,因为这是我喜欢的东西,学习自己喜欢的知识不需要解释,动力源源不断。
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"/> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } body { font: 14px/1.5 "Microsoft YaHei"; } a { color: #FFF; text-decoration: none; } .box { width: 1000px; height: 30px; line-height: 30px; background: #999; margin: 100px auto; position: relative; } #nav_list { position: absolute; z-index: 2; left: 0; top: 0; } #nav_list li { width: 100px; height: 30px; text-align: center; float: left; } #moveDiv { width: 100px; height: 40px; position: absolute; background: #333; z-index: 1; left: 0; top: -5px; } </style> <script type="text/javascript"> function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } function startMove(obj, attr, iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function () { var iCur = 0; if (attr == 'opacity') { iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { iCur = parseInt(getStyle(obj, attr)); } var iSpeed = (iTarget - iCur) / 5; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (iCur == iTarget) { clearInterval(obj.timer); } else { if (attr == 'opacity') { obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')'; obj.style.opacity = (iCur + iSpeed) / 100; } else { obj.style[attr] = iCur + iSpeed + 'px'; } } }, 30); } function getByClass(oParent, sClass) { if (oParent.getElementsByClassName) { return oParent.getElementsByClassName(sClass); } else { var aEle = oParent.getElementsByTagName('*'); var aResult = []; for (var i = 0; i < aEle.length; i++) { if (aEle[i].className == sClass) { aResult.push(aEle[i]); } } return aResult; } } window.onload = function () { var navList = document.getElementById('nav_list'); var navListLi = navList.getElementsByTagName('li'); var moveDiv = document.getElementById('moveDiv'); var current = getByClass(navList, 'current')[0]; var i = 0; startMove(moveDiv,'left',current.offsetLeft); for (i = 0; i < navListLi.length; i++) { navListLi[i].onmouseover = function () { //moveDiv.style.left=this.offsetLeft+'px'; startMove(moveDiv, 'left', this.offsetLeft); } navListLi[i].onmouseout=function() { startMove(moveDiv,'left',current.offsetLeft); } } } </script> </head> <body> <div class="box"> <ul id="nav_list"> <li><a href="###">nav001</a></li> <li><a href="###">nav002</a></li> <li><a href="###">nav003</a></li> <li class="current"><a href="###">nav004</a></li> <li><a href="###">nav005</a></li> <li><a href="###">nav006</a></li> </ul> <div id="moveDiv"></div> </div> </body> </html>