Rumah > Artikel > hujung hadapan web > JS CSS menyedari kesan bar navigasi menatal dinamik apabila tetikus meluncur ke atas kemahiran javascript

JS CSS menyedari kesan bar navigasi menatal dinamik apabila tetikus meluncur ke atas kemahiran javascript

WBOYasal: 2016-05-16 15:38:071092semak imbas

Artikel ini menerangkan contoh JS CSS merealisasikan kesan bar navigasi menatal dinamik apabila tetikus meluncur ke atas. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah bar navigasi yang menatal secara dinamik apabila tetikus dilegarkan. Sila tunggu sehingga halaman web dimuatkan atau dimuat semula. Ini dilaksanakan menggunakan JavaScript untuk menjadi dari jQuery Dipilih dari dalam, ia kelihatan seperti itu.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut:

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

Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JS non-Alert melaksanakan tetingkap timbul kesan "maklumat belum dibaca" di penjuru kanan sebelah bawah kemahiran halaman web_javascriptArtikel seterusnya：JS non-Alert melaksanakan tetingkap timbul kesan "maklumat belum dibaca" di penjuru kanan sebelah bawah kemahiran halaman web_javascript

Artikel berkaitan

Lihat lagi