文字淡入淡出详解

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

思路：

　　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>

 

posted @ 2016-09-05 07:32  宫圆薰  阅读(1194)  评论(0)  编辑  收藏  举报