<meta http-equiv=
"Content-Type"
content=
"text/html; charset=gb2312"
>
<title>原生JS实现淡入淡出效果</title>
<style>
#demo div.box {float:left;width:31%;margin:0 1%}
#demo div.box h2{margin-bottom:10px}
#demo div.box h2 input{padding:5px 8px;font-size:14px;font-weight:bolder}
#demo div.box div{text-indent:10px; line-height:22px;border:2px solid #555;padding:0.5em;overflow:hidden}
</style>
<script>
window.onload =
function
(){
var
iBase = {
Id:
function
(name){
return
document.getElementById(name);
},
SetOpacity:
function
(ev, v){
ev.filters ? ev.style.filter =
'alpha(opacity='
+ v +
')'
: ev.style.opacity = v / 100;
}
}
function
fadeIn(elem, speed, opacity){
speedspeed = speed || 20;
opacityopacity = opacity || 100;
elem.style.display =
'block'
;
iBase.SetOpacity(elem, 0);
var
val = 0;
(
function
(){
iBase.SetOpacity(elem, val);
val += 5;
if
(val <= opacity) {
setTimeout(arguments.callee, speed)
}
})();
}
function
fadeOut(elem, speed, opacity){
speedspeed = speed || 20;
opacityopacity = opacity || 0;
var
val = 100;
(
function
(){
iBase.SetOpacity(elem, val);
val -= 5;
if
(val >= opacity) {
setTimeout(arguments.callee, speed);
}
else
if
(val < 0) {
elem.style.display =
'none'
;
}
})();
}
var
btns = iBase.Id(
'demo'
).getElementsByTagName(
'input'
);
btns[0].onclick =
function
(){
fadeIn(iBase.Id(
'fadeIn'
));
}
btns[1].onclick =
function
(){
fadeOut(iBase.Id(
'fadeOut'
),40);
}
btns[2].onclick =
function
(){
fadeOut(iBase.Id(
'fadeTo'
), 20, 10);
}
}
</script>
<!--DEMO start-->
<div id=
"demo"
>
<div
class
=
"box"
>
<h2><input type=
"button"
value=
"点击淡入"
></h2>
<div id=
"fadeIn"
style=
"display:none"
>
<p>脚本之家</p>
</div>
<p>脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</p>
</div>
<div
class
=
"box"
>
<h2><input type=
"button"
value=
"点击淡出"
></h2>
<div id=
"fadeOut"
>
<p>脚本之家</p>
</div>
<p>脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</p>
</div>
<div
class
=
"box"
>
<h2><input type=
"button"
value=
"点击淡出至指定透明度"
></h2>
<div id=
"fadeTo"
>
<p>脚本之家</p>
</div>
<p>脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料。</p>
</div>
</div>
<!--DEMO
end
-->