CSS 3模仿Android 中的toast效果

在Android中，可以使用toast搞出一個信息提示的效果，在CSS 3中，其實也可以

模仿一下，如下代碼，先是CSS：

1. #toast{   
2. position: fixed;   
3. top: 20px;   
4. left: 50%;   
5. width: 200px;   
6. margin-left: -100px;   
7. border: 1px solid #666;   
8. background-color: #B1BCCF;   
9. padding: 10px 0 ;   
10. text-align:center;   
11. opacity: .9;   
12.     
13. /*The good stuff */  
14. -webkit-transition: opacity 0.5s ease-out; /* Saf3.2+, Chrome */  
15. -moz-transition: opacity 0.5s ease-out; /* FF4+ */  
16. -ms-transition: opacity 0.5s ease-out; /* IE10? */  
17. -o-transition: opacity 0.5s ease-out; /* Opera 10.5+ */  
18. transition: opacity 0.5s ease-out;   
19.     
20. }  

之後設計一個按鈕，然後設計JAVASCRIPT代碼如下：

1. <script type="text/javascript">   
2.   
3.   
4.   
5.     var intervalCounter = 0;   
6.   
7.   
8.   
9.     function hideToast(){   
10.   
11.         var alert = document.getElementById("toast");   
12.   
13.         alert.style.opacity = 0;   
14.   
15.         clearInterval(intervalCounter);   
16.   
17.     }   
18.   
19.        
20.   
21.     function drawToast(message){   
22.   
23.            
24.   
25.         var alert = document.getElementById("toast");   
26.   
27.            
28.   
29.         if (alert == null){   
30.   
31.             var toastHTML = '<div id="toast">' + message + '</div>';   
32.   
33.             document.body.insertAdjacentHTML('beforeEnd', toastHTML);   
34.   
35.         }   
36.   
37.         else{   
38.   
39.             alert.style.opacity = .9;   
40.   
41.         }   
42.   
43.            
44.   
45.            
46.   
47.         intervalCounter = setInterval("hideToast()", 1000);   
48.   
49.     }   
50.   
51.        
52.   
53.     function save(){   
54.   
55.         drawToast("Item saved");   
56.   
57.     }   
58.   
59.        
60.   
61. </script>   
62.   <button onclick="save()">Save</button>  

可惜只能在非IE下運行了。