Heim > Artikel > Web-Frontend > JS CSS implementiert die Fähigkeit zum Schieben des Tab-Menüs effect_javascript

JS CSS implementiert die Fähigkeit zum Schieben des Tab-Menüs effect_javascript

WBOYOriginal: 2016-05-16 15:42:551793Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie der Effekt des Schieberegisterkartenmenüs mit JS CSS implementiert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein einfacher JS-CSS-Schiebetür-Spezialeffektcode, wenn die Maus über das Menü gleitet, und die Maus muss nicht angeklickt werden. Der Schiebetüreffekt ist ein relativ beliebter Webmenüeffekt , das häufig im Internet verwendet wird. Sie können diese Art von Menü sehen. Dieses Menü wurde unter Firefox, IE8 und Chrome getestet. Die Codekompatibilität ist akzeptabel. Sie können es verwenden, um den Stil für Ihren eigenen Gebrauch zu verschönern.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt:

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

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Clock Jquery HTML5-Code für Spezialeffekte (einstellbarer Wecker und Spracherinnerung)_jqueryNächster Artikel：Clock Jquery HTML5-Code für Spezialeffekte (einstellbarer Wecker und Spracherinnerung)_jquery

In Verbindung stehende Artikel

Mehr sehen