4顶

仿淘宝商城左侧商品分类弹出效果兼容各主流浏览器

稿源：互联网 2022-04-02 21:40:00 点击： 22272 撤稿纠错

仿淘宝商城左侧商品分类（原生js－－兼容各主流浏览器）的网页特效代码，效果很不错。

以下讨论的是和淘宝浏览器相关的仿淘宝商城左侧商品分类弹出效果兼容各主流浏览器教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>title</title> 
   <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
 
</head>
<body>
 <style>
  /**/
              .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='sub-col'>
  <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='sub-item' style='display:none;'>潮流服饰</div>
    <div class='sub-item' style='display:none;'>精品鞋包</div>
    <div class='sub-item' style='display:none;'>美容护肤</div>
    <div class='sub-item' style='display:none;'>珠宝饰品</div>
    <div class='sub-item' style='display:none;'>运动户外</div>
    <div class='sub-item' style='display:none;'>手机数码</div>
    <div class='sub-item' style='display:none;'>居家生活</div>
    <div class='sub-item' style='display:none;'>家电家装</div>
    <div class='sub-item' style='display:none;'>母婴用品</div>
    <div class='sub-item' style='display:none;'>食品保健</div>
   </div>
  </div>
 </div>
 </div>
 <script type="text/javascript">
//get element's id with '$(id)' method
function $(){
    var elements = new Array();
    for (var i = 0; i < arguments.length; i++) {
        var element = arguments[i];
        if (typeof element == 'string') 
            element = document.getElementById(element);
        if (arguments.length == 1) 
            return element;
        elements.push(element);
    }
    return elements;
}
//get ele's className
function getElementsByClassName(className, tagName){
    var ele = [], all = document.getElementsByTagName(tagName || '*');
    for (var i = 0; i < all.length; i++) {
        if (all[i].className == className) {
            ele[ele.length] = all[i];
        }
    }
    return ele;
}
</script>
 <script type='text/javascript'>
  var category=$('J_category'),popCategory=$('J_popCategory'),
 cateLi=category.getElementsByTagName('li'),subItems=getElementsByClassName('sub-item','div');
 
 category.onmouseover=function(){
  popCategory.style.display='block';
 };
 category.onmouseout=function(){
  popCategory.style.display='none';
 };
 
 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='none';
   }
   subItems[this.index].style.display='block';
  };
 }
 </script>
</body>
</html>

关于仿淘宝商城左侧商品分类弹出效果兼容各主流浏览器的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011081173077.shtml方便下次再访问哦。

·上一篇： 跟随鼠标移动浮动显示大图展示的特效
·下一篇： 原生JS编写的照片墙效果实例演示特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

仿淘宝商城左侧商品分类弹出效果兼容各主流浏览器

文章分类LIST >>返回首页

最新游戏

最新新闻

仿淘宝商城左侧商品分类弹出效果 兼容各主流浏览器

文章分类LIST >>返回首页

最新游戏

最新新闻

仿淘宝商城左侧商品分类弹出效果兼容各主流浏览器