JS CSS réalise l'effet de barre de navigation à défilement dynamique lorsque la souris glisse sur les compétences

JS CSS réalise l'effet de barre de navigation à défilement dynamique lorsque la souris glisse sur les compétences_javascript

WBOY

Libérer： 2016-05-16 15:38:07

original

1172 Les gens l'ont consulté

Cet article décrit l'exemple de JS CSS réalisant l'effet de barre de navigation à défilement dynamique lorsque la souris glisse dessus. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'une barre de navigation qui défile dynamiquement lorsque la souris est survolée. Notez que deux images d'arrière-plan sont utilisées ici. Veuillez attendre que la page Web la charge ou l'actualise plusieurs fois. Ceci est implémenté en utilisant JavaScript, mais le code semble. être de jQuery Choisi de l'intérieur, ça y ressemble un peu.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant :

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

Copier après la connexion

J'espère que cet article sera utile à la programmation JavaScript de chacun.