js控制淡入淡出示例代碼
更新時(shí)間：2013年11月12日 17:32:58 作者：
淡入淡出效果想必大家都有見(jiàn)到過(guò)吧，在本文將為大家介紹下使用js如何控制淡入淡出，感興趣的朋友可以參考下
相對(duì)來(lái)說(shuō)可以讓初學(xué)者看一下，并不太實(shí)用，可能jquery4條語(yǔ)句就能解決，但是原生相對(duì)有參照性，了解最終原理才是關(guā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>無(wú)標(biāo)題文檔</title>
<style type="text/css">
body {margin:0;padding:0;color:#000000;}
#div_test {
width: 100%;
height: 100%;
background-color: #000000;
position:absolute;
filter:Alpha(Opacity=0)
}
</style>
<script type="text/javascript">
var i = 100;
function $(id) {return document.getElementById(id);}
function chang_display() { i--;
var div = $('div_test');
div.style.filter = "Alpha(Opacity="+i+")";
div.style.opacity = i / 100;
if ( i== "0")
{document.getElementById('div_test').style.display="none";//隱藏
exit
}
}
/*控制div隱藏*/
function hid() {
setInterval(chang_display, 1);
}
</script>
</head>
<body>
<div id="div_test" onclick="hid()" style="width:200px;height:200px;"></div>
<div><a >123</a>123123</div>
</body>
<script defer="defer">
var j = 0;
function $(id) {return document.getElementById(id);}
function turn_display()
{ j++;
var div = $('div_test');
div.style.filter = "Alpha(Opacity="+j+")";
div.style.opacity = j / 100;
if ( j== "0")
{document.getElementById('div_test').style.display="none";//隱藏
exit
}
}
setInterval(turn_display, 1);
</script>
</html>
復(fù)制代碼 代碼如下:
<!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>無(wú)標(biāo)題文檔</title>
<style type="text/css">
body {margin:0;padding:0;color:#000000;}
#div_test {
width: 100%;
height: 100%;
background-color: #000000;
position:absolute;
filter:Alpha(Opacity=0)
}
</style>
<script type="text/javascript">
var i = 100;
function $(id) {return document.getElementById(id);}
function chang_display() { i--;
var div = $('div_test');
div.style.filter = "Alpha(Opacity="+i+")";
div.style.opacity = i / 100;
if ( i== "0")
{document.getElementById('div_test').style.display="none";//隱藏
exit
}
}
/*控制div隱藏*/
function hid() {
setInterval(chang_display, 1);
}
</script>
</head>
<body>
<div id="div_test" onclick="hid()" style="width:200px;height:200px;"></div>
<div><a >123</a>123123</div>
</body>
<script defer="defer">
var j = 0;
function $(id) {return document.getElementById(id);}
function turn_display()
{ j++;
var div = $('div_test');
div.style.filter = "Alpha(Opacity="+j+")";
div.style.opacity = j / 100;
if ( j== "0")
{document.getElementById('div_test').style.display="none";//隱藏
exit
}
}
setInterval(turn_display, 1);
</script>
</html>
相關(guān)文章
JS+CSS實(shí)現(xiàn)經(jīng)典的左側(cè)豎向滑動(dòng)菜單效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)經(jīng)典的左側(cè)豎向滑動(dòng)菜單效果,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
每天一篇javascript學(xué)習(xí)小結(jié)（RegExp對(duì)象）
這篇文章主要介紹了javascript中的RegExp對(duì)象知識(shí)點(diǎn)，對(duì)RegExp對(duì)象的基本使用方法，以及各種方法進(jìn)行整理，感興趣的小伙伴們可以參考一下2015-11-11
ParticlesJS是一個(gè)輕量級(jí)的創(chuàng)建粒子背景的 JavaScript 庫(kù)，接下來(lái)通過(guò)本文給大家分享JS庫(kù)之ParticlesJS使用簡(jiǎn)介，感興趣的朋友一起看看吧2017-09-09
這篇文章主要介紹了JavaScript之不可靠的undefined，想深入JS的同學(xué)，可以參考下2021-05-05
這篇文章主要介紹了小程序橫屏方案對(duì)比，實(shí)現(xiàn)橫屏的方案也有多種，但是每種方案都有一定的缺陷，恰巧最近也在橫屏方案上踩了不少坑，本文就一起來(lái)介紹一下吧2020-06-06
javascript中RegExp保留小數(shù)點(diǎn)后幾位數(shù)的方法分享
文章介紹一篇關(guān)于javascript中RegExp保留小數(shù)點(diǎn)后幾位數(shù)方法，有需要了解的朋友可以參考一下2013-08-08
原生js基于canvas實(shí)現(xiàn)一個(gè)簡(jiǎn)單的前端截圖工具代碼實(shí)例
這篇文章主要介紹了原生js基于canvas實(shí)現(xiàn)一個(gè)簡(jiǎn)單的前端截圖工具代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
JavaScript 獲取元素在父節(jié)點(diǎn)中的下標(biāo)(推薦)
jQuery中直接通過(guò)$(this).index()即可得到當(dāng)前元素的下標(biāo)。下面通過(guò)實(shí)例給大家介紹JavaScript 獲取元素在父節(jié)點(diǎn)中的下標(biāo)，需要的朋友參考下吧2017-06-06
JavaScript代碼實(shí)現(xiàn)禁止右鍵、禁選擇、禁粘貼、禁shift、禁ctrl、禁alt
這篇文章主要介紹了JavaScript代碼實(shí)現(xiàn)禁止右鍵、禁選擇、禁粘貼、禁shift、禁ctrl、禁alt,需要的朋友可以參考下2015-11-11
在本篇文章里小編給各位分享的是關(guān)于判斷“命令按鈕”是否被鼠標(biāo)單擊的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們參考下。2019-07-07