js+css3随机排列照片墙展示特效

js+css3实现的随机排列照片墙展示特效，随机生成相册图片墙布局，点击图片可放大查看。

js代码
<scripttype="text/javascript">
window.addEventListener('load',function(){
//获取事件源
varul=document.getElementById('ul');
//获取图片可活动区域
varwindowW=document.documentElement.clientWidth-340;
varwindowH=document.documentElement.clientHeight-191;
//循环遍历
for(vari=0;i<10;i++){
//创建li标签
varli=document.createElement('li');
//追加到ul的子元素
ul.appendChild(li);
//创建img标签
varimg=document.createElement('img');
li.appendChild(img);
//动态插入图片
img.setAttribute('src','img/'+i+'.jpg');
}
//获取所有的li
varallLi=ul.children;
//遍历
for(varj=0;j<allLi.length;j++){
//取出单个li
varli=allLi[j];
//随机获取位置
li.style.left=parseInt(Math.random()*windowW)+'px';
li.style.top=parseInt(Math.random()*windowH)+'px';
//获取随机角度
li.style.transform='rotate('+Math.random()*360+'deg)';
//监听点击事件
li.addEventListener('click',function(){
for(vari=0;i<allLi.length;i++){
allLi.className='';
}
this.className='checked';
});
}
})
</script>



下载

2023-11-23 01:33 上传

点击文件名下载附件
售价: 1 金币  [记录]  [购买]