Native JS implementiert den Taobao-ähnlichen Produktklassifizierungsmenü-Effektcode auf der linken Seite_Javascript-Fähigkeiten-js-Tutorial-php.cn

Native JS implementiert den Taobao-ähnlichen Produktklassifizierungsmenü-Effektcode auf der linken Seite_Javascript-Fähigkeiten

PHP中文网

Freigeben： 2016-05-16 15:39:48

Original

3050 Leute haben es durchsucht

Dieser Artikel beschreibt das Beispiel der Verwendung von nativem JS, um den Effektcode des Produktklassifizierungsmenüs auf der linken Seite von Taobao zu imitieren. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein nativer JS-ähnlicher Taobao-Produktklassifizierungsmenü-Effektcode auf der linken Seite, der mit JavaScript-Technologie implementiert und mit allen gängigen Browsern kompatibel ist. Ändern Sie das CSS-Menü selbst und es wird schöner.

Ein Screenshot des Laufeffekts lautet wie folgt:

Die Online-Demo-Adresse lautet wie folgt:

http: //demo.jb51.net/ js/2015/js-f-taobao-pro-menu-style-codes/

Der spezifische Code lautet wie folgt:

<!DOCTYPE html>
<head>
<title>仿淘宝网左侧的商品分类菜单代码</title> 
</head>
<body>
<style>
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,
input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,
textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,
th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:&#39;&#39;}abbr,
acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}
 .hidden{display:none;}
.sub-col{position:relative;z-index:999;}
.category{width:230px;border:1px solid #8A0E00;}
.category h3 {height:30px;line-height:30px;text-indent:15px;background:#A91319;color:#fff;}
.category ul li{height:30px;line-height:30px;text-indent:35px;background:#FFF8F6 url(arrow-r.png) 
no-repeat 205px center;border-bottom:1px solid 
#ECECEC;border-top:1px solid #fff;cursor:pointer;color:#A71F37;} 
.category ul li:hover{background-color:#8A0E00;color:#fff;}
.pop-category{border:2px solid #8A0E00;background:#FDF5F5;position:absolute;left:200px;top:40px;z-index:1000;}
.pop-category .sub-item{width:390px;height:350px;}
</style>
<div class="wrapper">
<div class=&#39;sub-col&#39;>
<div class="category">
   <h3>所有商品分类</h3>
   <ul id="J_category" class="item">
    <li>潮流服饰</li>
    <li>精品鞋包</li>
    <li>美容护肤</li>
    <li>珠宝饰品</li>
    <li>运动户外</li>
    <li>手机数码</li>
    <li>居家生活</li>
    <li>家电家装</li>
    <li>母婴用品</li>
    <li>食品保健</li>
   </ul>
   <div id="J_popCategory" class="pop-category hidden">
    <div class=&#39;sub-item&#39; style=&#39;display:none;&#39;>潮流服饰</div>
    <div class=&#39;sub-item&#39; style=&#39;display:none;&#39;>精品鞋包</div>
    <div class=&#39;sub-item&#39; style=&#39;display:none;&#39;>美容护肤</div>
    <div class=&#39;sub-item&#39; style=&#39;display:none;&#39;>珠宝饰品</div>
    <div class=&#39;sub-item&#39; style=&#39;display:none;&#39;>运动户外</div>
    <div class=&#39;sub-item&#39; style=&#39;display:none;&#39;>手机数码</div>
    <div class=&#39;sub-item&#39; style=&#39;display:none;&#39;>居家生活</div>
    <div class=&#39;sub-item&#39; style=&#39;display:none;&#39;>家电家装</div>
    <div class=&#39;sub-item&#39; style=&#39;display:none;&#39;>母婴用品</div>
    <div class=&#39;sub-item&#39; style=&#39;display:none;&#39;>食品保健</div>
   </div>
  </div>
 </div>
 </div>
 <script type="text/javascript">
//get element&#39;s id with &#39;$(id)&#39; method
function $(){
 var elements = new Array();
 for (var i = 0; i < arguments.length; i++) {
 var element = arguments[i];
 if (typeof element == &#39;string&#39;) 
  element = document.getElementById(element);
 if (arguments.length == 1) 
  return element;
 elements.push(element);
 }
 return elements;
}
//get ele&#39;s className
function getElementsByClassName(className, tagName){
 var ele = [], all = document.getElementsByTagName(tagName || &#39;*&#39;);
 for (var i = 0; i < all.length; i++) {
 if (all[i].className == className) {
  ele[ele.length] = all[i];
 }
 }
 return ele;
}
</script>
 <script type=&#39;text/javascript&#39;>
 var category=$(&#39;J_category&#39;),popCategory=$(&#39;J_popCategory&#39;),
 cateLi=category.getElementsByTagName(&#39;li&#39;),subItems=getElementsByClassName(&#39;sub-item&#39;,&#39;div&#39;);
 category.onmouseover=function(){
  popCategory.style.display=&#39;block&#39;;
 };
 category.onmouseout=function(){
  popCategory.style.display=&#39;none&#39;;
 };
 for(var i=0; i<cateLi.length; i++){
  cateLi[i].index=i;
  cateLi[i].onmouseover=function(){
   for(var j=0; j<subItems.length; j++){
    subItems[j].style.display=&#39;none&#39;;
   }
   subItems[this.index].style.display=&#39;block&#39;;
  };
 }
 </script>
</body>
</html>

Nach dem Login kopieren

Das Obige ist die native JS-Implementierung, die den Inhalt des Taobao-Produktklassifizierungsmenüs auf der linken Seite nachahmt. Code_Javascript-Kenntnisse. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!