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;
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;
20. }

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

1. <script type="text/javascript">
5. var intervalCounter = 0;
9. function hideToast(){
11. var alert = document.getElementById("toast");
13. alert.style.opacity = 0;
15. clearInterval(intervalCounter);
17. }
21. function drawToast(message){
25. var alert = document.getElementById("toast");
29. if (alert == null){
31. var toastHTML = '<div id="toast">' + message + '</div>';
33. document.body.insertAdjacentHTML('beforeEnd', toastHTML);
35. }
37. else{
39. alert.style.opacity = .9;
41. }
47. intervalCounter = setInterval("hideToast()", 1000);
49. }
53. function save(){
55. drawToast("Item saved");
57. }
61. </script>
62. <button onclick="save()">Save</button>

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