JavaScript 渐隐渐显
■知识点
渐隐渐显效果主要通过动态修改元素的透明度来实现。
■实例设计
下面的示例实现一个简单的渐隐渐显动画效果。
//渐隐渐显动画显示函数
//参数:e表示元素,t表示速度,值越大速度越慢
//io表示显方式,true表示渐显,false表示渐隐
function fade (e, t, io) {
var t = t || 10; //初始化渐隐渐显速度
if(io){var i = 0;} //初始化渐隐渐显方式
else{var i = 100; }
var out = setlnterval(function(){ //设计定时器
setOpacity(e, i); //调用 setOpacity ()函数
if(io) { //根据渐隐或渐显方式决定执行效果
i ++ ;
if(i >= 100) clearTimeout(out);
} else{
i-- ;
if(i <= 0) clearTimeout (out);
}
}, t);
}
下面调用该函数。
<style type="text/css">
.block {width:200px; height:200px; background-color:red; }
</style>
<div class="block" id="blockl"></div>
<script>
e = document.getElementByld('blockl');
fade (e, 50, true) ; //应用渐隐渐显动画效果
</script>
点击加载更多评论>>