JS+CSS实现鼠标滑过时动态翻滚的导航条效果_web导航条鼠标事件变化效果-CSDN博客

本文介绍了一种使用HTML和JavaScript实现的动态翻滚导航条效果。通过设置不同的滚动速度和距离，可以让导航条在鼠标悬停时向上翻滚显示更多选项，在鼠标离开时则向下滚动隐藏选项，为用户提供独特的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  <!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>