文字飞舞和合成

闲余时间玩玩js的小东西,顺便分享给大家,有兴趣拿去溜溜!

知识点: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;
				}

			})();

以上就是该效果的全部实现过程,难度不大,基本对知识点了解的话是没什么大问题的,有需要也可以在项目中用上,容易抓住用户的眼球!