点击按钮头像图片随机排列js特效代码

点击按钮头像图片随机排列js特效代码，采用纯js原生态编写的随机排列照片头像特效，效果流畅、柔和。

分类：图片代码 > 按钮控制难易：初级

查看演示下载资源下载积分： 20 积分

js代码

<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
window.onload=function (){
	var aLi=document.getElementsByTagName('li');
	var zIndex=1;
	
	// 测试，与效果无关！
	for (var i=0; i<aLi.length; i++)
	{
		var oSpan=document.createElement('span');
		oSpan.innerHTML=i;
		aLi[i].appendChild(oSpan);
	}
	
	// 布局转换
	aPos=[];
	for (var i=0; i<aLi.length; i++)
	{
		aPos.push({
			left:aLi[i].offsetLeft,
			top:aLi[i].offsetTop
		});
	}
	
	for (var i=0; i<aLi.length; i++)
	{
		aLi[i].style.position='absolute';
		aLi[i].style.left=aPos[i].left+'px';
		aLi[i].style.top=aPos[i].top+'px';
		aLi[i].style.margin=0;
	}
	
	// 随机换位置
	var oBtn=document.getElementById('btn');
	oBtn.onclick=function (){
		
		aPos.sort(function (){
			return Math.random()-0.5;
		});
		
		for (var i=0; i<aLi.length; i++)
		{
			move(aLi[i], aPos[i]);
		}
	};
};
</script>