文字淡入淡出详解

核心思想:设置文字透明值

思路:

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

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <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>
</body>

</html>
原文地址:https://www.cnblogs.com/kymming/p/5840980.html