jQuery上下淡入淡出弹出层特效代码插件

92建站   2021-11-08   收藏本文

这套jQuery上下淡入淡出弹出层特效代码插件,十分超炫的弹出层,里头涵盖了淡入淡出、上下滑动4种特效,加载网页页面时将原素置于网页页面可见范围的顶端达到由上而下显示特效,弹出层自适应浏览器窗口尺寸。

使用方法:

<script type="text/javascript" src="js/jquery.1.7.2.min.js"></script>
<script>
$(function(){
    if($.browser.msie && $.browser.version<=6)
    {
        $(".PopupLayer").css("position","absolute");
    }
    $(".PopupLayer").css({"top":$(".PopupLayer").outerHeight()*-1+"px","opacity":0});//载入页面时将元素置于页面可见区域的顶部达到自上而下显示效果(PS:还有隐藏效果)
    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);
    }
…………
…………
…………
</script>

效果截图:

弹出层代码,特效代码,代码插件

免责声明:本站模板均来自用户分享和网络收集,仅供学习与参考,请勿用于商业用途,若损害您的权益,请联系网站客服,核实后立即删除。
展开