Native JS melaksanakan kod kesan menu klasifikasi produk seperti Taobao di sebelah kiri kemahiran

Native JS melaksanakan kod kesan menu klasifikasi produk seperti Taobao di sebelah kiri kemahiran_javascript

PHP中文网

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

asal

3049 orang telah melayarinya

Artikel ini menerangkan contoh penggunaan JS asli untuk meniru kod kesan menu klasifikasi produk di sebelah kiri Taobao. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah kod kesan menu klasifikasi produk Taobao seperti JS asli di sebelah kiri, dilaksanakan dengan teknologi JavaScript dan serasi dengan semua penyemak imbas arus perdana. Ubah suai sendiri menu CSS dan ia akan menjadi lebih cantik.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut:

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

Salin selepas log masuk

Di atas adalah pelaksanaan JS asli meniru sebelah kiri menu klasifikasi Produk Taobao kesan kandungan kemahiran code_javascript, untuk kandungan yang lebih berkaitan, sila beri perhatian kepada laman web PHP Cina (www.php.cn)!