jQuery手机wap图标菜单导航

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

自定义图标菜单

<ul> <li class="s-mod-item" w="266" h="127" l="0" t="0" bg="#e8443a" cbg="#d92e24"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>1.商品展示管理模块</span></div> <div class="s-mod-cur"><span>自主添加产品类别，不限级数。后台对产品实现增、查、删、改等功能。前端对产品进行列表展示、详细页面展示。详细页面包含产品小图、大图、详细参数、文字内容介绍、多图滚动展示、图片放大展示、关联资讯介绍展示。</span></div> </div> </li> <li class="s-mod-item" w="266" h="127" l="278" t="0" bg="#aa5096" cbg="#922a7b"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>2.会员注册、登陆管理模块</span></div> <div class="s-mod-cur"><span>管理会员注册信息、会员列表，建立会员等级权限组，分配会员至权限组，然后根据权限使用网站的其它各个功能模块。</span></div> </div> </li> <li class="s-mod-item" w="127" h="266" l="556" t="0" bg="#1CA1E2" cbg="#1182BA"> <div class="s-mod-wrap"> <div class="s-mod-def"><span>3.会员基本资料管理模块</span></div> <div class="s-mod-cur"><span>对会员注册的基本资料进行查看、修改。</span></div> </div> </li> </ul>

jQuery

$(function() {
    $(".s-mod ul").fadeIn(300, function() {
        $(".s-mod .s-mod-loding").remove();
    })
    $(".s-mod ul .s-mod-item").each(function() {
        var i = $(this);
        var o = {
            w: 1 * i.attr("w"),
            h: 1 * i.attr("h"),
            l: 1 * i.attr("l"),
            t: 1 * i.attr("t"),
            bg: i.attr("bg"),
            cbg: i.attr("cbg"),
            speed: 600
        };
        var wrap = i.find(".s-mod-wrap");
        var def = i.find(".s-mod-def");
        var cur = i.find(".s-mod-cur");
        i.css({width: o.w, height: o.h, left: o.l, top: o.t});
        wrap.css({width: o.w, height: o.h});
        def.css({width: (o.w - 24), height: o.h, backgroundColor: o.bg});
        cur.css({width: (o.w - 24), height: o.h, backgroundColor: o.cbg, top: o.h});

        def.find("span").css({paddingTop: ((o.h - def.find("span").height()) / 2)})
        cur.find("span").css({paddingTop: ((o.h - cur.find("span").height()) / 2)})

        //滑动效果
        i.hover(function() {
            def.stop().animate({top: -o.h}, o.speed, "easeOutBounce")
            cur.stop().animate({top: 0}, o.speed, "easeOutBounce")
        }, function() {
            def.stop().animate({top: 0}, o.speed, "easeOutBounce")
            cur.stop().animate({top: o.h}, o.speed, "easeOutBounce")
        })
    })
})