JS+CSS实现鼠标滑过时动态翻滚的导航条效果

2019-11-20 11:31:45

字体：大中小

来源：转载

供稿：网友

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/js/2015/js-css-mouse-over-nav-scroll-style-codes/

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>动态翻滚的导航条</title><style type="text/css">.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}/* ]]> */</style></head><body><div id="nav"><ul class="clear"><li><a href="#">武林网</a></li><li><a href="#">网页特效</a></li><li><a href="#">工具软件</a></li><li><a href="#">脚本下载</a></li><li><a href="#">菜单导航</a></li><li><a href="#">层和布局</a></li><li><a href="#">论坛社区</a></li><li><a href="#">广告联系</a></li><li class="nobg"></li></ul></div><script type="text/javascript"> /* <![CDATA[ */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});  }})();/* ]]> */</script></body></html>

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

上一篇：js中不同的height, top的区别对比

下一篇：avalon js实现仿google plus图片多张拖动排序附源码下载