原生Js實現(xiàn)元素漸隱/漸現(xiàn)(原理為修改元素的css透明度)
更新時間：2013年06月24日 16:44:57 作者：
大家經(jīng)?？吹骄W(wǎng)頁里圖片漸變顯示，自己寫一個。原理很簡單就是修改元素的css透明度，具體實現(xiàn)代碼如下，感興趣的各位可以參考下哈，希望對大家有所幫助
經(jīng)?？吹骄W(wǎng)頁里圖片漸變顯示，自己寫一個。
原理很簡單就是修改元素的css透明度。
在線預(yù)覽效果：http://jsfiddle.net/dtdxrk/BHUp9/embedded/result/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>原生Js元素漸隱/漸顯方法</title>
</head>
<body>
<button id="show">漸顯</button>
<button id="hiden">漸隱</button>
<img src="http://images.cnitblog.com/blog/150659/201306/20171658-303d375a1ec740e29a567b269d6297f1.jpg" id="img">
<script type="text/javascript">
function alphaPlay(obj,method){ //method有兩個值show或hiden
var n = (method == "show") ? 0 : 100,
ie = (window.ActiveXObject) ? true : false;
var time = setInterval(function(){
if(method == "show"){
if(n < 100){
n+=10;
if(ie){
obj.style.cssText = "filter:alpha(opacity="+n+")";
}else{
(n==100) ? obj.style.opacity = 1 : obj.style.opacity = "0."+n;
}
}else{
clearTimeout(time);
}
}else{
if(n > 0){
n-=10;
if(ie){
obj.style.cssText = "filter:alpha(opacity="+n+")";
}else{
obj.style.opacity = "0."+n;
}
}else{
clearTimeout(time);
}
}
},30);
}
var img = document.getElementById("img");
document.getElementById("show").onclick = function(){
alphaPlay(img,"show");
}
document.getElementById("hiden").onclick = function(){
alphaPlay(img,"hiden");
}
</script>
</body>
</html>
原理很簡單就是修改元素的css透明度。
在線預(yù)覽效果：http://jsfiddle.net/dtdxrk/BHUp9/embedded/result/
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>原生Js元素漸隱/漸顯方法</title>
</head>
<body>
<button id="show">漸顯</button>
<button id="hiden">漸隱</button>
<img src="http://images.cnitblog.com/blog/150659/201306/20171658-303d375a1ec740e29a567b269d6297f1.jpg" id="img">
<script type="text/javascript">
function alphaPlay(obj,method){ //method有兩個值show或hiden
var n = (method == "show") ? 0 : 100,
ie = (window.ActiveXObject) ? true : false;
var time = setInterval(function(){
if(method == "show"){
if(n < 100){
n+=10;
if(ie){
obj.style.cssText = "filter:alpha(opacity="+n+")";
}else{
(n==100) ? obj.style.opacity = 1 : obj.style.opacity = "0."+n;
}
}else{
clearTimeout(time);
}
}else{
if(n > 0){
n-=10;
if(ie){
obj.style.cssText = "filter:alpha(opacity="+n+")";
}else{
obj.style.opacity = "0."+n;
}
}else{
clearTimeout(time);
}
}
},30);
}
var img = document.getElementById("img");
document.getElementById("show").onclick = function(){
alphaPlay(img,"show");
}
document.getElementById("hiden").onclick = function(){
alphaPlay(img,"hiden");
}
</script>
</body>
</html>
相關(guān)文章
純html+css+javascript實現(xiàn)樓層跳躍式的頁面布局（實例代碼）
這篇文章主要介紹了純html+css+javascript實現(xiàn)樓層跳躍式的頁面布局,需要的朋友可以參考下2017-10-10
在開發(fā)網(wǎng)頁的過程中,經(jīng)常需要實現(xiàn)導(dǎo)航菜單的切換,下面這篇文章主要給大家介紹了關(guān)于前端導(dǎo)航欄不變切換局部頁面的3種方法,文中給出了詳細的代碼示例,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Object.keys?詭異特性示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
微信小程序 自定義復(fù)選框?qū)崿F(xiàn)代碼實例
這篇文章主要介紹了微信小程序 自定義復(fù)選框?qū)崿F(xiàn)代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
Bootstrap Table可拖動，需要用到它的Resizable擴展插件，下面腳本之家小編給大家?guī)砹薆ootstrap Table列寬拖動的方法，感興趣的朋友一起看看吧2018-08-08
這篇文章主要為大家詳細介紹了JS畫布動態(tài)實現(xiàn)黑客帝國背景效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
大家都知道JS在很多情況下會進行強制類型轉(zhuǎn)換，最常見的方式有兩種，在文章均給大家提到，下面小編給大家?guī)砹薐S在if中的強制類型轉(zhuǎn)換，感興趣的朋友一起看看吧2018-07-07
javascript中innerText和innerHTML屬性用法實例分析
這篇文章主要介紹了javascript中innerText和innerHTML屬性用法,實例分析了javascript中innerText和innerHTML屬性的作用和相關(guān)的使用技巧,需要的朋友可以參考下2015-05-05
JavaScript數(shù)組Array的一些常用方法總結(jié)
JavaScript的Array對象是用于構(gòu)造數(shù)組的全局對象,數(shù)組是類似于列表的高階對象,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組Array的一些常用方法,需要的朋友可以參考下2021-11-11
找到一點可憐的關(guān)于dojo資料，謝謝作者！...2006-12-12