读书人

CSS 三模仿android 中的toast效果

发布时间: 2012-08-22 09:50:35 作者: rapoo

CSS 3模仿android 中的toast效果
在android中,可以使用toast搞出一个信息提示的效果,在CSS 3中,其实也可以
模仿一下,如下代码,先是CSS:

<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下运行了

读书人网 >CSS

热点推荐