cari

Rumah >hujung hadapan web >tutorial js >JS CSS melaksanakan kemahiran menu suis gelongsor effect_javascript

JS CSS melaksanakan kemahiran menu suis gelongsor effect_javascript

WBOY
WBOYasal
2016-05-16 15:42:551852semak imbas

Contoh dalam artikel ini menerangkan cara melaksanakan kesan menu tab pensuisan gelongsor dengan JS CSS. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah kod kesan khas pintu gelangsar CSS JS yang ringkas Apabila tetikus meluncur ke atas menu, menu kedua secara automatik bertukar dan tetikus tidak perlu diklik Kesan pintu gelangsar ialah kesan menu web yang agak popular , yang sering digunakan di Internet Anda boleh melihat menu jenis ini. Menu ini telah diuji di bawah Firefox, IE8 dan Chrome Keserasian kod boleh diterima Anda boleh menggunakannya untuk mencantikkan gaya untuk kegunaan anda sendiri.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-css-move-cha-tab-menu-style-codes/

Kod khusus adalah seperti berikut: 

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" lang="zh_CN" xml:lang="zh_CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var $=function(a,b){
 var ID = document.getElementById(a);
 var OBJ= (b)&#63;ID.getElementsByTagName(b):ID;
 return OBJ
}
var n=0;
var tab = function(MENU,BODY){
 var l = MENU.length;
 for(var i=0;i<l;i++){
  MENU[i].onmouseover=function(a){
   return function(){
    MENU[n].className="label"
    BODY[n].style.display = "none";
    MENU[a].className="label label-selected";
    BODY[a].style.display = "block";
    n=a;
   }
  }(i);
 }
}
</script>
<style>
body{font-family: "微软雅黑","SimSun","宋体","Arial Narrow";}
#header,#main,#footer{width: 1050px;background: #F1F9D9;margin: 5px auto;}
#header{height: 50px;}
#main{height: auto;}
#footer{height: 50px;}
#menu{height: 36px;padding: 2px 0 0 0;}
li{list-style: none;cursor: pointer;}
.category{margin: 0;height: 35px;border-bottom: 1px solid #b5e2f3;text-align: center;}
.label{border: 1px solid #b5e2f3;float: left;width: 100px;height: 25px;margin: 0 3px;background: #F1FEF3;padding: 9px 0 0 0;outline: 0;-moz-border-radius: 5px 5px 0 0;}
.label-selected{background: #FFF;border-bottom: 1px solid #FFF;}
#linksContent{margin-top: -1;height: 600px;padding: 10px;border: 1px solid #b5e2f3;border-top: 0;background: #FFF;}
.link{float: left;width: 180px;display: block;margin: 10px 0;}
</style>
<title>myLinks</title> 
</head>
<body>
 <div id="container">
 <div id="header"></div>
 <div id="main">
  <div id="menu">
   <ul class="category">
   <li class="label label-selected">在线学习</li>
   <li class="label">运动休闲</li>
   <li class="label">编程社区</li>
   <li class="label">文化娱乐</li>
   <li class="label">休息项目</li>
   <li class="label">人际往来</li>
  </ul>
  </div>
  <div id="linksContent">
   <div class="category-1" style="display:block;">
   <ul>
   <li class="link"><span>html学习</span></li>
   <li class="link"><span>编译原理</span></li>
   <li class="link"><span>人工智能</span></li>
   <li class="link"><span>算法设计</span></li>
   </ul>
  </div>
  <div class="category-2" style="display:none;">
   <ul>
   <li class="link"><span>开车</span></li>
   <li class="link"><span>郊游</span></li>
   <li class="link"><span>音乐</span></li>
   </ul>
  </div>
  <div class="category-2" style="display:none;">
   <ul>
   <li class="link"><span>MSDN</span></li>
   <li class="link"><span>编译原理</span></li>
   <li class="link"><span>科幻电影</span></li>
   <li class="link"><span>技术文档</span></li>
   </ul>
  </div>
  <div class="category-2" style="display:none;">
   <ul>
    <li class="link"><span>java学习</span></li>
   <li class="link"><span>html学习</span></li>
   <li class="link"><span>编译原理</span></li>
   <li class="link"><span>人工智能</span></li>
   <li class="link"><span>算法设计</span></li>
   </ul>
  </div>
  <div class="category-2" style="display:none;">
   <ul>
   <li class="link"><span>html学习</span></li>
   <li class="link"><span>编译原理</span></li>
   <li class="link"><span>人工智能</span></li>
   </ul>
  </div>
  <div class="category-2" style="display:none;">
   <ul>
    <li class="link"><span>java学习</span></li>
   <li class="link"><span>html学习</span></li>
   <li class="link"><span>算法设计</span></li>
   </ul>
  </div> 
  </div>
 </div>
 <div id="footer"></div>
 </div>
<script>
 tab($("menu","li"),$("linksContent","div"));
</script>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk 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：Perkongsian kod kesan khas Jam Jquery html5 (jam penggera boleh ditetapkan dan peringatan suara)_jqueryArtikel seterusnya：Perkongsian kod kesan khas Jam Jquery html5 (jam penggera boleh ditetapkan dan peringatan suara)_jquery

Artikel berkaitan

Lihat lagi