用JS实现图片淡出后打印文字 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体打印</title>
    <style type="text/css">
        #txt{
            width:500px;
            height:auto;
            color:red;
        }
        img{
            opacity:0;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            /*变量*/
            var oImg1=document.getElementById("img");
            var oBody=document.getElementsByTagName("body")[0];
                /*假设一个透明度字*/
                oImg1.alpha=0;
                /*时间计时器*/
            timer2=setInterval(function(){
                /*创建一个速度变量，用最终值（100）减去假设值（oImg1.alpha）出一个数字（可以为任意数，不过最好是取8）*/
                var iSpeed1=(100-oImg1.alpha)/8
                /*根据上面计算出的速度值可能为小数，所以这里把速度的值转换为整数*/
                iSpeed1=iSpeed1>0?Math.ceil(iSpeed1):Math.floor(iSpeed1);
                /*判断假设值是否等于最终值，如果相等，则关闭计算器*/
                if(oImg1.alpha==100){
                    clearInterval(timer2);
                    oBody.onload=fun();
                }
                /*如果不等*/
                else{
                    /*假设值加上速度在赋予假设值*/
                    oImg1.alpha+=iSpeed1;
                    /*IE用*/
                    oImg1.style.filter="alpha(opacity:"+oImg1.alpha+ ")";
                    /*除IE以外*/
                    oImg1.style.opacity=oImg1.alpha/100;
            }
            },300);
        }

        /*字体打印*/
        /*创建一个数组*/
       var arr=["Lorem <br/>Ipsum is simply<br/> dummy text of <br/>the printing and <br/>typesetting industry."]
       i=0;
function fun(){
    var timer=null;
    var oTxt=document.getElementById("txt");
    var text=arr[0]
    /*循环提取指定数目字符*/
    var str=text.substr(0,i);
    oTxt.innerHTML=str+"_";
    i++;
    if(i==text.length){
         clearTimeout(timer)
    }
    else{
        timer=setTimeout("fun()",30)
    }
}
</script>
</head>
<body>
<img id="img" src="2.png"/>
<div id="txt"></div>
</body>

 

posted @ 2015-08-16 22:51  苦逼的人生  阅读(265)  评论(0)    收藏  举报