首先非常感谢网友小刘的无私分享，此作品是一款非常实用的导航菜单，实现了滑动横向二级菜单特效，功能非常简单，javascript代码简洁，测试的是ie6+ 火狐 谷歌 都兼容，跟分享一款jquery实用的滑动导航菜单特效功能是一样的，大家可以下载对比一下哦。。。
js代码如下：
window.onload = function () {
'use strict';
var tagNav, tagBar, tagLi, timer, i, n, m, speed, changeWidth;
tagNav = document.getElementById('nav');
tagBar = document.getElementById('navBar');
tagLi = tagNav.getElementsByTagName('ul')[0].getElementsByTagName('li');
speed = 0;
tagBar.style.width = tagLi[0].offsetWidth + 'px';
function sports(n, m) {
timer = setInterval(function () {
speed = (n - tagBar.offsetLeft) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (tagBar.offsetLeft === n) {
clearInterval(timer);
} else {
tagBar.style.left = tagBar.offsetLeft + speed + 'px';
}
changeWidth = m - tagBar.offsetWidth;
changeWidth = changeWidth > 0 ? Math.ceil(speed) : Math.floor(speed);
tagBar.style.width = m + changeWidth + 'px';
}, 20);
}
for (i = 0; i < tagLi.length; i += 1) {
tagLi[i].onmouseover = function () {
clearInterval(timer);
sports(this.offsetLeft, this.offsetWidth);
};
tagLi[i].onmouseout = function () {
clearInterval(timer);
sports(0, tagLi[0].offsetWidth);
};
}
};
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友小刘 导航菜单 滑动插件 二级菜单