JS CSS realisiert den dynamischen Scroll-Navigationsleisteneffekt, wenn die Maus darüber gleitet_Javascript-Fähigkeiten-js-Tutorial-php.cn

JS CSS realisiert den dynamischen Scroll-Navigationsleisteneffekt, wenn die Maus darüber gleitet_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:38:07

Original

1135 Leute haben es durchsucht

Dieser Artikel beschreibt das Beispiel von JS CSS, das den dynamischen Scroll-Navigationsleisteneffekt realisiert, wenn die Maus darüber gleitet. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist eine Navigationsleiste, die dynamisch scrollt, wenn Sie mit der Maus darüber fahren. Bitte warten Sie, bis die Webseite mehrmals geladen oder aktualisiert wurde von jQuery stammen Von innen herausgesucht, sieht es ein bisschen so aus.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-css-mouse-over-nav-scroll-style-codes/

Der spezifische Code lautet wie folgt:

<!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") &#63; 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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.