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)文章
簡單了解Javscript中兄弟ifream的方法調(diào)用
這篇文章主要介紹了簡單了解Javscript中兄弟ifream的方法調(diào)用文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了video.js使用改變ui的過程，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
Javascript控制div屬性動態(tài)變化實例分析
這篇文章主要介紹了Javascript控制div屬性動態(tài)變化,以實例形式較為詳細(xì)的分析了JavaScript響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)折疊展開效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
基于javascript代碼實現(xiàn)通過點擊圖片顯示原圖片
這篇文章主要介紹了基于javascript代碼實現(xiàn)通過點擊圖片顯示原圖片的相關(guān)資料,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了js代碼改變單選框選中狀態(tài)的簡單實例，有需要的朋友可以參考一下2013-12-12
一些收集整理的JS 整理出一些收集的JS代碼，在這里向所有原作者致敬。2010-02-02
JavaScript獲取表格（table）當(dāng)前行的值、刪除行、增加行
這篇文章主要介紹了JavaScript獲取表格（table）當(dāng)前行的值、刪除行、增加行,本文直接給出代碼示例,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了bootstrap彈出層的多種觸發(fā)方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)省市縣三級下拉聯(lián)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-04-04