您好,欢迎来到麦获科技。
搜索
您的当前位置:首页jQuery实战之仿淘宝商城左侧导航效果_jquery

jQuery实战之仿淘宝商城左侧导航效果_jquery

来源:麦获科技


希望对大家有用。

下面是效果图:
效果实现基于jq的 .html()方法。大大简化了对DOM的操作。
下面是代码:
代码如下:




仿淘宝商城左侧导航效果t








  • 潮流服饰


  • 精品鞋包


  • 运动户外


  • 手机数码


  • 母婴用品






  • 品牌关键字1




  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌




  • 品牌关键字2




  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌


  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌


  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌


  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌




  • 品牌关键字3



  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌


  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌


  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌


  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌


  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌


  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌


  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌



  • 品牌关键字4



  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌


  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌


  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌


  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌



  • 品牌关键字5



  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌


  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌


  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌


  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌


  • 大家电>


  • 品牌品牌品牌品牌品牌品牌品牌






  • $(document).ready(function(){//加载DOM
    if (!$("#guid").is(":animated")) {//首先判断是否处于动画状态
    var lis = $("#guid ul.nav li");
    //遍历文档树
    lis.each(function(i){
    $(this).bind("mouseover", i, function(){
    $("#showValue").show();
    var hv = $("#hdValue").children().eq(i);
    $("#showValue").html(hv.html());
    $("#showValue").bind("mouseover", function(){
    $("#showValue").show();
    })
    });
    });
    //控制鼠标移除事件
    $("#guid,#showValue").mouseleave(function(){
    $("#showValue").hide();
    });
    }
    });




    Copyright © 2019- maihouxidian.com 版权所有

    违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

    本站由北京市万商天勤律师事务所王兴未律师提供法律服务