文字飞舞和合成

知识点:string中的charAt(), Math.random()随机数,position 动画 clientWidth clientHeight(控制边界)

步骤:1.如何把每个文字用span包裹起来?

2.position改变span的top和left值

3.动画,利用随机数改变位

4.回归原点

效果图

Html 代码

<div id="box">  
    全书第一版已由电子工业出版社于2014年10月出版（版权页，内页1，内页2），铜版纸全彩印刷，附有索引。目前，网站的内容是第二版的初稿，预订2016年年初出版全书第一版已由电子工业出版社于2014年10月出版（版权页，内页1，内页2），铜版纸全彩印刷，附有索引。目前，网站的内容是第二版的初稿，预订2016年年初出版全书第一版已由电子工业出版社于2014年10月出版（版权页，内页1，内页2），铜版纸全彩印刷，附有索引。目前，网站的内容是第二版的初稿，预订2016年年初出版全书第一版已由电子工业出版社于2014年10月出版（版权页，内页1，内页2），铜版纸全彩印刷，附有索引。目前，网站的内容是第二版的初稿，预订2016年年初出版全书第一版已由电子工业出版社于2014年10月出版（版权页，内页1，内页2），铜版纸全彩印刷，附有索引。目前，网站的内容是第二版的初稿，预订2016年年初出版全书第一版已由电子工业出版社于2014年10月出版（版权页，（版权页，内页1，内页2），铜版纸全彩印刷，附有索引。目前，网站的内容是第二版的初稿，预订2016年年初出版全书第一版已由电子工业出版社于2014年10月出版（版权页，内页1，内页2），铜版纸全彩印刷，附有索引。目前，网站的内容是第二版的初稿，预订2016年年初出版全书第一版已由电子工业出版社于2014年10月出版（版权页，内页1，内页2），铜版纸全彩印刷，，内页2），铜版纸全彩印刷，附有索引。目前，网站的内容014年10月出版（版权页，内页1，内页2），铜版纸全彩印刷，附有索引。目前，网站的内容是第二版的初稿，预订2016年年初出版全书第一版已由电子工业出版社于2014年10月出版（版权页，内页1，内页2），铜版纸全彩印刷，附有索引。目前，网站的内容是第二版的初稿，预订2016年年初出版全书第一版已由电子工业出版社于2014年10月出版（版权页，内页1，内页2），铜版纸全彩印刷，附有索引。目前，网站的内容是第二版的初稿，预订2016年年初出版全书第一版已由电子工业出版社于2014年10月出版（版权页，内页1，内页2），铜版纸全彩印刷，附有索引。目前，网站的内容是第二版的初稿，预订2016年年初出版全书第一版已由电子工业出版社于2014年10月出版（版权页，内页1，内页2），铜版纸全彩印刷，附有索引。  
</div>

CSS代码

::selection{background:#FF0080}  
body{background:#000;font-size:14px;font-family:"微软雅黑";  
padding-top:50px;}  
#box{color:#fff;padding:20px}  
#box span{position:relative}

JS代码

(function(){  
    var $box = $("#box");  
    var text = $box.text();  
    var spanHtml = "";  
    var ww = document["body"]["clientWidth"];  
    var wh = window.innerHeight;  
    var i =0,len = text.length;  
    for(;i<len;i++){  
        spanHtml +=  "<span>"+text.charAt(i)+"</span>";  
    }  
    //charAt截取字符  
    $box.html(spanHtml);  
    //拿到所有的span  
    var spanDoms = $box.children();  
    var arr = ["+","-"];  
    $(spanDoms).each(function(){//遍历每个span  
        var random = rangeRandom(wh,ww);//具体数值会跑到浏览器外面去  
        var op = rangeRandom(0,1);  
          
        $(this).css({  
            left:parseInt(arr[op]+random),//把字符串变成数字  
            top:parseInt(arr[op]+random),  
            opacity:0  
        });  
          
        //执行动画  
        //delay()每个span(动画)出现的时间间隔  
        //随机数0-end  
        var time = Math.floor((Math.random()*3000)+1);  
        $(this).delay(time).animate({top:0,left:0,opacity:1},2000/*动画执行的时长*/);  
  
    });  
  
  
    function rangeRandom(start,end){  
        return Math.floor(Math.random() * (end - start + 1))+start;  
    }  
  
})();

猜你喜欢