知识点: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>
::selection{background:#FF0080}
body{background:#000;font-size:14px;font-family:"微软雅黑";
padding-top:50px;}
#box{color:#fff;padding:20px}
#box span{position:relative}
(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;
}
})();