suchen

Heim >Web-Frontend >js-Tutorial >Einfacher Schiebetüreffektcode, der von JS implementiert wurde und Taobao_Javascript-Fähigkeiten imitiert

Einfacher Schiebetüreffektcode, der von JS implementiert wurde und Taobao_Javascript-Fähigkeiten imitiert

WBOY
WBOYOriginal
2016-05-16 15:36:461121Durchsuche

Das Beispiel in diesem Artikel beschreibt den einfachen Code für den Schiebetüreffekt, der von JS implementiert wird und Taobao imitiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist eine einfache Nachahmung des Taobao-Schiebetüreffektcodes. Ich persönlich finde, dass ich schon einmal einen ähnlichen Code hatte. In der Schiebetür können Sie Ihre Webseite neu gestalten und in eine leistungsstarke Navigation umwandeln. Das ursprüngliche Beispiel ist ein Pinyin-Indexprogramm, das auch in ein Menü umgewandelt werden kann.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-f-taobao-simple-hdm-style-demo/

Der spezifische Code lautet wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单仿淘宝的一个不错的滑动门</title>
<style type="text/css">
body{font-size:12px;position:relative;font-family:Verdana, Geneva, sans-serif;}
a{color:blue;}
ul{margin:0;padding:0;list-style:none;}
#navigation{height:26px;}
#navigation li{float:left;}
#navigation li.show .content{display:block;}
#navigation li a,#navigation li span{display:inline-block;border:solid 1px #fff;border-bottom:none;height:26px;padding:0 6px;line-height:20px;overflow:hidden}
#navigation li a:hover,#navigation li.show a.index{background:#DBF3FE;border-color:#0a0;position:relative;top:0px;z-index:2;}
#container{position:relative;width:800px;margin:50px;}
#navigation li .content{position:absolute;left:0;top:26px;background:#DBF3FE;border:solid 1px #0a0;width:760px;padding:20px;display:none;}
#navigation li .content ul li{margin-right:10px;float:none;display:inline;}
#navigation li .content ul li a{border:none;}
#navigation li .content ul li{width:120px;}
#navigation li .content ul li h3{clear:both;text-align:left;}
</style>
</head>
<body>
<div id="container">
 <ul id="navigation">
  <li><span>整站导航：</span></li>
  <li>
   <a href="#" class="index">A</a>
   <div class="content">
    <h3>百度有啊</h3>
    <ul>
     <li><a href="http://www.baidu.com">百度有啊</a></li>
     <li><a href="#">致富小康</a></li>
    </ul>
    <h3>脚本下载</h3>
    <ul>
     <li><a href="#">黄河泰山</a></li>
     <li><a href="#">池鱼之殃</a></li>
     <li><a href="#">百度有啊</a></li>
    </ul>
   </div>
  </li>
  <li>
   <a href="#" class="index">B</a>
   <div class="content">
    <h3>网页特效</h3>
    <ul>
     <li><a href="http://www.jb51.net/jiaoben/">网页特效</a></li>
     <li><a href="http://www.baidu.com">百度搜索</a></li>
     <li><a href="http://mp3.baidu.com">百度MP3</a></li>
    </ul>
    <h3>精品代码</h3>
    <ul>
     <li><a href="#">代码索引</a></li>
     <li><a href="#">百度搜索</a></li>
    </ul>
   </div>
  </li>
  <li><a href="#" class="index">C</a><div class="content">C</div></li>
  <li><a href="#" class="index">D</a><div class="content">D</div></li>
  <li><a href="#" class="index">E</a><div class="content">E</div></li>
  <li><a href="#" class="index">F</a><div class="content">F</div></li>
  <li><a href="#" class="index">G</a><div class="content">G</div></li>
  <li><a href="#" class="index">H</a><div class="content">H</div></li>
  <li><a href="#" class="index">I</a><div class="content">I</div></li>
  <li><a href="#" class="index">J</a><div class="content">J</div></li>
  <li><a href="#" class="index">K</a><div class="content">K</div></li>
  <li><a href="#" class="index">L</a><div class="content">L</div></li>
  <li><a href="#" class="index">M</a><div class="content">M</div></li>
 </ul>
</div>
</body>
</html>
<script type="text/javascript">
function showAjaxContent(){
 var obj=document.getElementById("navigation");
 var liObj=obj.getElementsByTagName("li");
 var length=liObj.length;
 var currentLiObj;
 for(var i=0;i<length;i++){
  currentLiObj=liObj[i];
  if(currentLiObj.parentNode!=obj){continue;}
  //然后循环添加事件
  currentLiObj.onmouseover=function(){
   if(this.className.indexOf("show")<0){
    this.className+=" show";
   }
   clearStyle(this);
  }  
  currentLiObj.onmouseout=function(){
   this.className=this.className.replace("show","");
   clearStyle(this);
  }
 }
 function clearStyle(obj){
  for(var i=0;i<length;i++){
   currentLiObj=liObj[i];
   if(obj!=currentLiObj){
    currentLiObj.className=currentLiObj.className.replace("show","");
   }
  }
 }
}
showAjaxContent();
</script>

Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung 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：JS implementiert Navigationsmenücode mit bogenförmigen Hintergrundgradienteneffekten_Javascript-FähigkeitenNächster Artikel：JS implementiert Navigationsmenücode mit bogenförmigen Hintergrundgradienteneffekten_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen