js随机照片墙布局特效代码下载


js随机照片墙布局特效代码下载
js随机照片墙布局特效代码下载以及随机照片墙布局等js/jquery网页特效代码下载。

1. HTML代码

		<ul id="ul"></ul>
		<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>

相关推荐

发表评论

相关文章