집 >웹 프론트엔드 >JS 튜토리얼 >Native JS는 좌측에 타오바오식 상품 분류 메뉴 효과 코드를 구현합니다_javascript 스킬

Native JS는 좌측에 타오바오식 상품 분류 메뉴 효과 코드를 구현합니다_javascript 스킬

PHP中文网원래의: 2016-05-16 15:39:483050검색

이 글에서는 타오바오 좌측 상품 분류 메뉴의 효과 코드를 모방하기 위해 네이티브 JS를 사용하는 예를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

왼쪽의 기본 JS와 유사한 Taobao 제품 분류 메뉴 효과 코드이며 JavaScript 기술로 구현되었으며 모든 주류 브라우저와 호환됩니다. CSS 메뉴를 직접 수정하면 더욱 아름다워질 것입니다.

실행 중인 효과의 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http: //demo.jb51.net/ js/2015/js-f-taobao-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>

위는 Taobao의 제품 분류 메뉴 효과 code_javascript 기술 콘텐츠의 왼쪽을 모방한 기본 JS 구현입니다. 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트(www.php.cn)에 주목하세요!

성명：

이전 기사：javascript_javascript 기술을 위해 Arcgis를 기반으로 Baidu 지도 ABCD 마커의 효과 구현다음 기사：javascript_javascript 기술을 위해 Arcgis를 기반으로 Baidu 지도 ABCD 마커의 효과 구현

Native JS는 좌측에 타오바오식 상품 분류 메뉴 효과 코드를 구현합니다_javascript 스킬

관련 기사