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);

posted on 2012-03-02 16:10 上山打老虎,下山写代码阅读(297) 评论(0) 收藏举报