js操作效果之showTips与createBg

最新推荐文章于 2021-06-15 18:53:46 发布

JiangJunDriver

最新推荐文章于 2021-06-15 18:53:46 发布

阅读量2.4k

点赞数

分类专栏： js 文章标签： javascript 函数操作效果

本文链接：https://blog.csdn.net/JiangJunDriver/article/details/72820503

版权

js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

/**
 * 创建全屏透明背景层
 * @param   id
 */
function createBg (id) {
    $('<div id = "' + id + '"></div>').appendTo('body').css({
        'width' : $(document).width(),
        'height' : $(document).height(),
        'position' : 'absolute',
        'top' : 0,
        'left' : 0,
        'z-index' : 2,
        'opacity' : 0.3,
        'filter' : 'Alpha(Opacity = 30)',
        'backgroundColor' : '#000'
    });
}

/**操作成功效果**/
function showTips(tips,time,height){
    var windowWidth = $(window).width();height=height?height:$(window).height();
    time = time ? time : 1;
    var tipsDiv = '<div class="tipsClass">' + tips + '</div>';
    $( 'body' ).append( tipsDiv );
    $( 'div.tipsClass' ).css({
        'top' : height/2 + 'px',
        'left' : ( windowWidth / 2 ) - 100 + 'px',
        'position' : 'absolute',
        'padding' : '3px 5px',
        'background': '#670768',
        'font-size' : 14 + 'px',
        'text-align': 'center',
        'width' : '300px',
        'height' : '40px',
        'line-height' : '40px',
        'color' : '#fff',
        'font-weight' : 'bold',
        'opacity' : '0.8'
    }).show();
    setTimeout( function(){
        $( 'div.tipsClass' ).animate({
            top: height/2-50+'px'
        }, "slow").fadeOut();
    }, time * 1000);
}