在android中,可以使用toast搞出一个信息提示的效果,在CSS 3中,其实也可以
模仿一下,如下代码,先是CSS:
#toast{
position: fixed;
top: 20px;
left: 50%;
width: 200px;
margin-left: -100px;
border: 1px solid #666;
background-color: #B1BCCF;
padding: 10px 0 ;
text-align:center;
opacity: .9;
/*The good stuff */
-webkit-transition: opacity 0.5s ease-out; /* Saf3.2+, Chrome */
-moz-transition: opacity 0.5s ease-out; /* FF4+ */
-ms-transition: opacity 0.5s ease-out; /* IE10? */
-o-transition: opacity 0.5s ease-out; /* Opera 10.5+ */
transition: opacity 0.5s ease-out;
}
之后设计一个按钮,然后设计JAVASCRIPT代码如下:
var intervalCounter = 0;
function hideToast(){
var alert = document.getElementById("toast");
alert.style.opacity = 0;
clearInterval(intervalCounter);
}
function drawToast(message){
var alert = document.getElementById("toast");
if (alert == null){
var toastHTML = '
document.body.insertAdjacentHTML('beforeEnd', toastHTML);
}
else{
alert.style.opacity = .9;
}
intervalCounter = setInterval("hideToast()", 1000);
}
function save(){
drawToast("Item saved");
}
Save
可惜只能在非IE下运行了