原生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>
相關文章
firefox TBODY 用js顯示和隱藏時出現錯位的解決方法
今天幫別人寫一個網頁,發(fā)現:當用javascript動態(tài)設置tr.style.display = "block"顯示某行時,使用IE瀏覽沒有問題,但使用firefox瀏覽時該行被移到了其它行的后面,很是詫異。2008-12-12javascript attachEvent和addEventListener使用方法
attachEvent與addEventListener區(qū)別 適應的瀏覽器版本不同,同時在使用的過程中要注意2009-03-03firefox下對ajax的onreadystatechange的支持情況分析
firefox下對ajax的onreadystatechange的支持分析。用的到的朋友可以參考下。2009-12-12