ネイティブ JS は左側に淘宝網のような商品分類メニュー効果コードを実装します

ネイティブ JS は左側に淘宝網のような商品分類メニュー効果コードを実装します_javascript スキル

PHP中文网

リリース： 2016-05-16 15:39:48

オリジナル

3049 人が閲覧しました

この記事では、タオバオの左側にある商品分類メニューのエフェクトコードをネイティブJSを使って模倣する例を説明します。皆さんの参考に共有してください。詳細は次のとおりです:

これは、左側にあるネイティブ JS 風の淘宝商品分類メニュー効果コードで、JavaScript テクノロジで実装され、すべての主流ブラウザと互換性があります。 CSSメニューを自分で修正すると、より美しくなります。

実行中のエフェクトのスクリーンショットは次のとおりです:

オンラインデモのアドレスは次のとおりです:

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

具体的なコードは次のとおりです:

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

ログイン後にコピー

上記は、淘宝網商品分類メニュー効果コード_javascriptスキルコンテンツの左側を模倣したネイティブJS実装です。その他の関連コンテンツについては、PHP中国語Webサイト(www.php.cn)に注目してください。