javascript开发系列---仿android toast提示
效果图
显示3秒,透明度从1到0
实现原理:z-index属性,opacity属性,jquery动画
1.定义css
1 /*** 悬浮提示 ***/
2 .tips {
3 position: absolute;
4 font-size: 12px;
5 background: black;
6 z-index: 2;
7 overflow: hidden;
8 filter: alpha(opacity=50);
9 opacity: 0.5;
10 top: 0;
11 -moz-border-radius: 7px;
12 -webkit-border-radius: 7px;
13 border-radius: 5px;
14 background: black;
15 color: white;
16 opacity: 0.7;
17 left: 20%;
18 top: 80%;
19 }
20 .tips span {
21 position: absolute;
22 text-align: center;
23 overflow: hidden;
24 width: 200px;
25 height: 20px;
26 }
2.定义显示的js
1 $(".tips").remove();
2 var tipsDiv = document.createElement('div');
3
4 tipsDiv.className = "tips";
5 tipsDiv.style.width = 200 + 'px';
6 tipsDiv.style.height = 20 + 'px';
7 document.body.appendChild(tipsDiv);
8 var tipsSpan = document.createElement('span');
9
10 tipsDiv.appendChild(tipsSpan);
11 $(".tips>span").html(content);
12 $(".tips").show();
13 $(".tips").animate({
14 opacity : "1"
15
16 }, 0).animate({
17 opacity : "0"
18 }, 3000);
