CSS 3模仿android 中的toast效果

在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代码如下：

<script type="text/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 = '<div id="toast">' + message + '</div>';

			document.body.insertAdjacentHTML('beforeEnd', toastHTML);

		}

		else{

			alert.style.opacity = .9;

		}

		

		

		intervalCounter = setInterval("hideToast()", 1000);

	}

	

	function save(){

		drawToast("Item saved");

	}

	

</script>
  <button onclick="save()">Save</button>

   可惜只能在非IE下运行了

评论

1 楼 caipeiming 2016-05-21  

下面有个简单的例子

JavaScript仿安卓实现toast message效果