当前位置: 萬仟网 > IT编程>开发语言>Jquery > html提示信息框淡入淡出效果(自己的思路,如果有更好的思路,请留言)

html提示信息框淡入淡出效果(自己的思路,如果有更好的思路,请留言)

2019年05月10日 07:34  | 萬仟网IT编程  | 我要评论

使用方法:

调用initmessagebox(“要显示的文字”)方法即可

<!--信息框-->
<div id="messagebox"></div>
<!--load jquery-->
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>
        /*提示信息框动态效果*/
        var messageboxt;
        var top1 = 10;
        var opacity = 0;
        //初始化数据
        function initmessagebox(info) {
            top1 = 10;
            opacity = 0;
            opacity1 = 1;
            $("#messagebox").html(info);
            $("#messagebox").css({ 'display': 'block' });
            appearmessagebox();
        }
        //出现信息框
        function appearmessagebox() {
            top1 += 1;
            opacity += 0.05;
            if (opacity < 1) {
                messageboxt = settimeout("appearmessagebox()", 15);
            }
            else {
                disappearmessagebox();
            }
            $("#messagebox").css({ 'top': string(top1) + 'px' });
            $("#messagebox").css({ 'opacity': string(opacity) });
        }
        //隐藏信息框
        function disappearmessagebox() {
            opacity -= 0.05;
            if (opacity > 0.05) {
                messageboxt = settimeout("disappearmessagebox()", 40);
            }
            else {
                opacity = 0;
                $("#messagebox").css({ 'display': 'none' });
            }
            $("#messagebox").css({ 'opacity': string(opacity) });
        }
    </script>

用到的css

#messagebox {
    width:200px;
    height:40px;
    background-color:#f66;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:10px auto;
    display:none;
    z-index:999;
    text-align:center;
    line-height:40px;
}

 

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com