文字淡入淡出详解

Posted 2020-08-06 MorningKit

实现方法：字符串的拼接

1.将文字写入盒子里，设置文字淡入淡出实质是指盒子的透明效果
2.获取盒子id
3.为盒子设置透明变量值i
4.区分ie浏览器及其他浏览器透明度设置
5.判断透明度自增与自减值
6.如果i<100实现自增，否则实现自减，但是有部分值既在自增又在自减
7.设置标志，使中间自增与自减的部分区分开
8.设置定时器

<!-- 实现淡入淡出效果代码部分 -->

<div id="box">This is a fade text</div>
<script>
　　var i=1;
　　var flag=true;
　　function fade(){
　　var box=document.getElementById(‘box‘);
　　if(document.all){
　　box.style.filter="alpha(opacity=‘+i+‘)";
　　}else{
　　box.style.opacity=parseFloat(i/100);
　　}
　　if(i<100 && flag){
　　i+=5;
　　}
　　else{
　　flag=false;
　　}
　　if(i>0 && !flag){
　　i-=5;
　　}
　　else{
　　flag=true;
　　}
　　setTimeout(‘fade()‘,200);
　　}
　　fade();
</script>