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

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

WBOYoriginal: 2016-05-16 15:38:071088parcourir

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>

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：JS non-Alert implémente la fenêtre contextuelle d'effet "informations non lues" dans le coin inférieur droit de la page Web_javascript skillsArticle suivant：JS non-Alert implémente la fenêtre contextuelle d'effet "informations non lues" dans le coin inférieur droit de la page Web_javascript skills

Articles Liés

Voir plus