首先非常感谢网友Null的无私分享,此Jquery特效是一款非常实用、常用、超炫的弹出层作品,里面包含了渐现渐隐
、上下滑动4种效果,载入页面时将元素置于页面可见区域的顶部达到自上而下显示效果,弹出层自适应浏览器窗口大小。
特效核心代码如下:
function notice_show(){//显示
var browser_visible_region_height=document.documentElement.clientHeight;//获取浏览器可见区域高度
var element_height=$(".PopupLayer").outerHeight();//获取元素高度:height+paelement_heighting+margin
//计算元素显示时的top值
var element_show_top=(browser_visible_region_height-element_height)/2;
$(".PopupLayer").stop(true).animate({top:element_show_top,opacity:1},1800);
}
function notice_hidden(){//隐藏
var element_height=$(".PopupLayer").outerHeight();//获取元素高度:height+paelement_heighting+margin
var ee=-element_height;//元素隐藏时的top值
$(".PopupLayer").stop(true).animate({top:ee,opacity:0},1000);
}
效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
层特效 弹出层 滑动插件 消息提示 tip提示层 网友Null