文字渐出效果

一，有次在一个外网上看到了这种文字的，效果，一番查找并没有找到类似的插件，所以动手自己写了一个，先上图，这里没有在样式上做过多的渲染，实现后的效果大概就是这个样子。
文字渐出效果
下面上代码：（base.css里清除了一些基本的样式，引入了jquery）
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/base.css"/>
    <style>
        .box{
            width: 380px;
            margin: 300px auto;
            padding: 20px;
            position: relative;
        }
        .box .lineT,.lineL{
            position: absolute;
            top:0;
            left:0;
            width: 1px;
            height: 1px;
            background-color: #333;
        }
        .box .lineB,.lineR{
            position: absolute;
            bottom:0;
            right:0;
            width: 1px;
            height: 1px;
            background-color: #333;
        }
        .describe{
            width: 340px;
            height: 75px;
            position: relative;
        }
        .describe span{
            opacity: 0;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box">
       <div class="describe">
           也许，我们之间的缘份，就是一朵花与一只蝶的轮回
           为此，我在心里向佛叩了数久，让我此生遇见了你
           可以朝朝暮暮地读你，读你成明媚春阳的温暖，读
           你成如水月光的飘逸
       </div>
        <div class="line lineT"></div>
        <div class="line lineL"></div>
        <div class="line lineB"></div>
        <div class="line lineR"></div>
    </div>
</div>
</body>
</html>
<script src="js/jquery-1.7.2.js"></script>
<script>
 //调用函数
textSlipsAway('.describe',800,60,lineAnimate);

function textSlipsAway(elementName,runTime,intervalTime,callback){
    var str=$(''+elementName+'').text(); //获取原始文字
    var strs= new Array(); //定义一数组
    var html='';    //定义html
    strs=str.split("\n"); //以换行分割字符串

    for(var i=0;i<strs.length;i++){
        strs[i]=strs[i].replace(/\s/g, "");//去掉字符串中的空格
    }
    for(var j=0;j<strs.length;j++){
        strs[j]=strs[j].split(""); //进一步分割字符串，将strs数组中的字符串元素分割成单个字符组成的数组
    }
    for(var k=0;k<strs.length;k++) {   //重构html结构，每行文字加p标签，class为opa，每个字加span标签
        html+="<p class='opa'>";
        for(var l=0;l<strs[k].length;l++){
            html += "<span>" + strs[k][l] + "</span>";
        }
    }
    $(''+elementName+'').html(html);  //将新的html结构渲染到dom中
    var arrayPos=new Array(); //用于存储文字在文档中的位置，也是动画结束时文字的位置
    for(var b=0;b<strs.length;b++){  //获取原始文档中每个字符的位置，并存入对应数组
        var lis=new Array();
        for(var m=0;m<strs[b].length;m++){
            var newTop=$(''+elementName+' .opa:eq('+b+') span:eq('+m+')').position().top;  //获取该文字位置
            var newLeft=$(''+elementName+' .opa:eq('+b+') span:eq('+m+')').position().left;
            lis[m]={   //以对象形态存储该文字位置
                top:newTop,
                left:newLeft
            }
        }
        arrayPos[b]=lis;  //将该文字存储到数组
    }
    for(var n=0;n<strs.length;n++){  //计算文字动画执行前的位置，并设置到每个文字
        // console.log(arrayPos[n]);
        for(var o=0;o<strs[n].length;o++){
            $(''+elementName+' .opa:eq('+n+') span:eq('+o+')').css(  //为文字设置动画前位置
                    {
                        position: 'absolute',
                        top:arrayPos[n][o].top+150+'px',
                        left:arrayPos[n][o].left+'px',
                    }
            );
        }
    }
    var L=0;
    for(var p=0;p<strs.length;p++){   //动画效果
        L=strs[p].length>L?strs[p].length:L;   //strs.length是数组的长度也是文字的行数
        for(var q=0;q<strs[p].length;q++){
            $(''+elementName+' .opa:eq('+p+') span:eq('+q+')').delay(q*intervalTime).animate({top:arrayPos[p][q].top,opacity:1},runTime);
            //delay()是动画延迟多久执行，q代表这个文字在该行的第几位，
            // intervalTime是相邻文字间动画延迟时间
        }
    }
    if(callback){    //文字动画执行完后触发callback
        setTimeout(function () {
            callback();
        },L*intervalTime+runTime);
    }

}
function lineAnimate(){
    $(".lineT").animate({width:"90%"},2000);
    $(".lineB").animate({width:"90%"},2000);
    $(".lineL").animate({height:"90%"},2000);
    $(".lineR").animate({height:"90%"},2000);
}

</script>
相关推荐
