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

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

js代码

 

<script type="text/javascript">
	window.addEventListener('load',function(){
		//获取事件源
		var ul = document.getElementById('ul');
		//获取图片可活动区域
		var windowW = document.documentElement.clientWidth - 340;
		var windowH = document.documentElement.clientHeight - 191;
		//循环遍历
		for(var i=0;i<10;i++){
			//创建li标签
			var li = document.createElement('li');
			//追加到ul的子元素
			ul.appendChild(li);
			//创建img标签
			var img = document.createElement('img');
			li.appendChild(img);
			// 动态插入图片
			img.setAttribute('src','img/'+i+'.jpg');
		}
		//获取所有的li 
		var allLi = ul.children;
		//遍历
		for(var j=0;j<allLi.length;j++){
			//取出单个li
			var li = 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(var i=0;i<allLi.length;i++){
					allLi[i].className = '';
				}
				this.className = 'checked';
			});
		}
	})
</script>
点击下载
RIPRO主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
优富资源 » js+css3随机排列照片墙展示特效

发表评论

  • 1会员总数(位)
  • 927资源总数(个)
  • 0本周发布(个)
  • 0今日发布(个)
  • 3094稳定运行(天)

优富资源网 国内最专业的站长资源平台

WordPress专区 整站源码

切换

博客


全屏


顶部