分享一个刚从聚美优品扒下来的右侧悬浮层,你可以自定义功能按钮。
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.sucaihuo.com/php">
<s></s>
登录
</a>
</li>
<li class="mpbtn_cart" id="ibar_cart">
<a href="http://www.sucaihuo.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"});
}
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791