使用方法:
调用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;
- }