原生Js實現元素漸隱/漸現(原理為修改元素的css透明度)
更新時間：2013年06月24日 16:44:57 作者：
大家經?？吹骄W頁里圖片漸變顯示，自己寫一個。原理很簡單就是修改元素的css透明度，具體實現代碼如下，感興趣的各位可以參考下哈，希望對大家有所幫助
經?？吹骄W頁里圖片漸變顯示，自己寫一個。
原理很簡單就是修改元素的css透明度。
在線預覽效果：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透明度。
在線預覽效果：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>
相關文章
這篇文章主要為大家詳細介紹了JavaScript實現學生在線做題計時器功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
firefox TBODY 用js顯示和隱藏時出現錯位的解決方法
今天幫別人寫一個網頁，發(fā)現：當用javascript動態(tài)設置tr.style.display = "block"顯示某行時，使用IE瀏覽沒有問題，但使用firefox瀏覽時該行被移到了其它行的后面，很是詫異。2008-12-12
javascript attachEvent和addEventListener使用方法
attachEvent與addEventListener區(qū)別 適應的瀏覽器版本不同，同時在使用的過程中要注意2009-03-03
這篇文章主要介紹了詳解小程序如何動態(tài)綁定點擊的執(zhí)行方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
下面小編就為大家?guī)硪黄猻encha ext js 6 快速入門(必看)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要為大家詳細介紹了JavaScript實現飛機大戰(zhàn)游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript判斷兩種格式的輸入日期的正確性的代碼...2007-03-03
firefox下對ajax的onreadystatechange的支持情況分析
firefox下對ajax的onreadystatechange的支持分析。用的到的朋友可以參考下。2009-12-12
下面小編就為大家?guī)硪黄猨s判斷文件格式及大小的簡單實例(必看)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了JavaScript中使用參數個數實現重載功能,需要的朋友可以參考下2017-09-09