js控制淡入淡出示例代碼
更新時間：2013年11月12日 17:32:58 作者：
淡入淡出效果想必大家都有見到過吧，在本文將為大家介紹下使用js如何控制淡入淡出，感興趣的朋友可以參考下
相對來說可以讓初學者看一下，并不太實用，可能jquery4條語句就能解決，但是原生相對有參照性，了解最終原理才是關(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>無標題文檔</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>
復制代碼 代碼如下:
<!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>無標題文檔</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實現(xiàn)經(jīng)典的左側(cè)豎向滑動菜單效果
這篇文章主要介紹了JS+CSS實現(xiàn)經(jīng)典的左側(cè)豎向滑動菜單效果,涉及JavaScript響應(yīng)鼠標事件動態(tài)操作頁面元素的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
每天一篇javascript學習小結(jié)（RegExp對象）
這篇文章主要介紹了javascript中的RegExp對象知識點，對RegExp對象的基本使用方法，以及各種方法進行整理，感興趣的小伙伴們可以參考一下2015-11-11
ParticlesJS是一個輕量級的創(chuàng)建粒子背景的 JavaScript 庫，接下來通過本文給大家分享JS庫之ParticlesJS使用簡介，感興趣的朋友一起看看吧2017-09-09
這篇文章主要介紹了JavaScript之不可靠的undefined，想深入JS的同學，可以參考下2021-05-05
這篇文章主要介紹了小程序橫屏方案對比，實現(xiàn)橫屏的方案也有多種，但是每種方案都有一定的缺陷，恰巧最近也在橫屏方案上踩了不少坑，本文就一起來介紹一下吧2020-06-06
javascript中RegExp保留小數(shù)點后幾位數(shù)的方法分享
文章介紹一篇關(guān)于javascript中RegExp保留小數(shù)點后幾位數(shù)方法，有需要了解的朋友可以參考一下2013-08-08
原生js基于canvas實現(xiàn)一個簡單的前端截圖工具代碼實例
這篇文章主要介紹了原生js基于canvas實現(xiàn)一個簡單的前端截圖工具代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
JavaScript 獲取元素在父節(jié)點中的下標(推薦)
jQuery中直接通過$(this).index()即可得到當前元素的下標。下面通過實例給大家介紹JavaScript 獲取元素在父節(jié)點中的下標，需要的朋友參考下吧2017-06-06
JavaScript代碼實現(xiàn)禁止右鍵、禁選擇、禁粘貼、禁shift、禁ctrl、禁alt
這篇文章主要介紹了JavaScript代碼實現(xiàn)禁止右鍵、禁選擇、禁粘貼、禁shift、禁ctrl、禁alt,需要的朋友可以參考下2015-11-11
在本篇文章里小編給各位分享的是關(guān)于判斷“命令按鈕”是否被鼠標單擊的相關(guān)知識點內(nèi)容，有需要的朋友們參考下。2019-07-07