最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery聚美优品右侧悬浮层

来源:http://www.erdangjiade.com/ 沐浴春风 2015-08-30 14:44浏览(1563)

分享一个刚从聚美优品扒下来的右侧悬浮层,你可以自定义功能按钮。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery聚美优品右侧悬浮层
分类:悬浮层/弹出层 > 客服 难易:中级
查看演示 下载资源 下载积分: 30 积分

HTML

我们在右侧悬浮层加了登录悬浮层,购物车,钱包,财产,充值等按钮。

<div id="iBar" class="ibar"> 
    <div class="ibar_main_panel" style="left: 0px;"> 
        <ul class="ibar_mp_center"> 
            <li class="mpbtn_login" id='ibar_avatar'> 
                <a href="http://www.erdangjiade.com/php"> 
                    <s></s> 
                    登录 
                </a> 
            </li> 
            <li class="mpbtn_cart" id="ibar_cart"> 
                <a href="http://www.erdangjiade.com/js"> 
                    <s></s> 
                    <span class="text">购物车</span> 
                    <span class="cart_num">0</span> 
                </a> 
            </li> 
        </ul> 
    </div> 
</div>

jQuery

$(function() { 
    $("#iBar").find("li").hover(function() { //显示图标提示信息 
        $(this).addClass("on"); 
    }function() { 
        $(this).removeClass("on"); 
    }
    $("#ibar_cart").click(function() { //显示和隐藏购物车 
        var left = $(".ibar_sub_panel").css("left"); 
        if (left == '0px'{ 
            $(".ibar_sub_panel").animate({left: "-287px"}); 
        } else { 
            $(".ibar_sub_panel").animate({left: "0"}); 
        } 
    }
 
    $("#ibar_avatar,#ibar_loginbox").hover(function() { //显示头像浮动层 
        var top = (parseInt($("#iBar").height()) / 2) - 190
        $("#ibar_loginbox").attr("is-hover"1); 
        $("#ibar_loginbox").css({"top": top, "left""-287px"}); 
    }function() { 
        $("#ibar_loginbox").attr("is-hover"0); 
        setTimeout("hideLoginbox()"100); 
    }
})

隐藏登录弹出层方法

function hideLoginbox() { 
    var is_hover = $("#ibar_loginbox").attr("is-hover"); 
    if (is_hover != 1{ 
        $("#ibar_loginbox").css({"top""50px""left""0"}); 
    } 
}
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/462.html
评论2
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 椅子
    02-14 12:47
    ngu137
    可以,比较好用。。。
  • 头像 沙发
    01-14 08:40
    ngu137
    不错,可以下载来用下啦
1 2