Javascript實現(xiàn)div層漸隱效果的方法
更新時間：2015年05月30日 09:44:06 作者：lovebread
這篇文章主要介紹了Javascript實現(xiàn)div層漸隱效果的方法,涉及javascript操作頁面元素與樣式變化的相關(guān)技巧,需要的朋友可以參考下
本文實例講述了Javascript實現(xiàn)div層漸隱效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Alpha</title>
<style type="text/css">
#show {
background:#ffff66;
font-size:12px;
height:200px;
width:300px;
left:300px;
position:absolute;
text-align:center;
filter:alpha(opacity=0);
}
</style>
</head>
<body onload={document.getElementById('show').style.opacity=0;}>
<div id="show"></div>
<button onclick=fun()>button</button>
</body>
<script>
function fun(){
var div=document.getElementById('show');
div.style.opacity=1;
hidden(document.getElementById("show"),1,-0.01);
}
function hidden(o,i,s){
t=setInterval(function(){
i+=s;
o.style.opacity=i;
if(i<0)window.clearInterval(t);
},1);
};
</script>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
5分鐘快速掌握J(rèn)S中var、let和const的異同
在javascript中有三種聲明變量的方式：var、let、const，這個是對新手們來說應(yīng)該掌握的知識，所以這篇文章主要給大家介紹了關(guān)于如何通過5分鐘快速掌握J(rèn)S中var，let和const的異同，需要的朋友可以參考下2018-09-09
本文主要介紹了js實現(xiàn)一個簡單的數(shù)字時鐘效果的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了css與javascript跨瀏覽器兼容性,包括常見的css兼容性問題與javascript兼容性問題,以及IE與Firefox等常用瀏覽器的兼容性分析,需要的朋友可以參考下2014-09-09
這篇文章主要介紹了JS實現(xiàn)控制表格行內(nèi)容垂直對齊的方法,通過javascript的getElementById獲取元素并設(shè)置其相應(yīng)樣式來實現(xiàn)這一功能,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JS sort方法基于數(shù)組對象屬性值排序,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
javascript之分片上傳，斷點續(xù)傳的實際項目實現(xiàn)詳解
在本篇文章里小編給大家整理了關(guān)于javascript之分片上傳，斷點續(xù)傳的實際項目實現(xiàn)的詳細(xì)內(nèi)容，有需要的朋友們學(xué)習(xí)下。2019-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級評分，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
JS從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù)的方法
這篇文章給大家介紹基于js如何從一組數(shù)據(jù)中找到指定的單條數(shù)據(jù)，非常實用，實現(xiàn)方案也很簡單，需要的朋友可以參考下2016-06-06
純js實現(xiàn)瀑布流布局及ajax動態(tài)新增數(shù)據(jù)
這篇文章主要介紹了基于javascript實現(xiàn)瀑布流布局，及ajax動態(tài)新增數(shù)據(jù)的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
JavaScript中關(guān)于Object.create()的用法
這篇文章主要介紹了JavaScript中關(guān)于Object.create()的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02