本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果。分享给大家供大家参考。具体如下：

这是一款鼠标悬停时动态翻滚的导航条，注意这里用了两个背景图，请等待网页加载完成或多刷新几次，这个是使用JavaScript实现的，不过代码好像是从jQuery里摘出来的，有点像。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

动态翻滚的导航条

.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{display:inline-block}.clear{display:block}

div#nav{height:32px; background:url(images/YL29.jpg) repeat-x}

div#nav ul{

width:705px;

list-style:none;

margin-top: 0;

margin-right: auto;

margin-bottom: 0;

margin-left: 0px;

}

div#nav ul li{

float:left;

height:32px;

overflow:hidden;

background-image: url(images/YL30.jpg);

background-repeat: repeat-y;

background-position: right 0;

padding-top: 0;

padding-right: 1px;

padding-bottom: 0;

padding-left: 0px;

font-family: Arial;

font-size: 12px;

line-height: 32px;

font-weight: bold;

}

div#nav ul li a{

float:left;

height:100%;

width: 77px;

background:url(images/YL28.jpg) repeat-x;

color:#fff;

text-decoration:none;

padding-top: 0;

padding-right: 5px;

padding-bottom: 0;

padding-left: 5px;

text-align:center;

}

div#nav ul li a.hover{

clear:both;

background-position:0 -32px;

width: 77px;

}

div#nav ul li.on a{

background-position:0 -32px;

}

div#nav ul li.nobg{background:none}

/* ]]> */

/*

function nav(c, config){

this.config = config || {speed: 10, num: 2};

this.container = (typeof(c)=="object") ? c : document.getElementById(c);

this.lineHeight = this.container.offsetHeight;

this.scrollTimeId = null;

var _this = this;

this.__construct = function (){

var inner,el,href;

inner = _this.container.childNodes[0].innerHTML;

href = _this.container.childNodes[0].href;

el = document.createElement("a");

el.innerHTML = inner;

el.href = href;

el.className = 'hover';

_this.container.appendChild(el);

_this.container.onmouseover = function (){_this.start()};

_this.container.onmouseout = function (){_this.end()};

}();

this.start = function (){

_this.clear();

_this.scrollTimeId = setTimeout(function(){_this.scrollUp();}, _this.config.speed);

};

this.end = function (){

_this.clear();

_this.scrollTimeId = setTimeout(function(){_this.scrollDown();}, _this.config.speed);

};

this.scrollUp = function (){

var c = _this.container;

if(c.scrollTop >= _this.lineHeight){c.scrollTop = _this.lineHeight;return;}

c.scrollTop += _this.config.num;

_this.scrollTimeId = setTimeout(function(){_this.scrollUp();}, _this.config.speed);

};

this.scrollDown = function (){

var c = _this.container;

if(c.scrollTop <= 0){c.scrollTop = 0;return;}

c.scrollTop -= _this.config.num;

_this.scrollTimeId = setTimeout(function(){_this.scrollDown();}, _this.config.speed);

};

this.clear = function (){clearTimeout(_this.scrollTimeId)};

}

(function(){

var container = document.getElementById('nav');

var el_li = container.getElementsByTagName('li');

var arr = [];

for( var i = 0; i < el_li.length; i++){

if(el_li[i].className == 'on') continue;

arr[i] = new nav(el_li[i], {speed: 10, num: 4});

}

})

();

/* ]]> */

希望本文所述对大家的JavaScript程序设计有所帮助。