html php照片墙代码,js写的随机照片墙

无标题文档

html,body{ height:100%;}

.btn{

width:50px; /*宽：50像素*/

height:50px;/*高：50像素*/

background:white;/*背景颜色:黑色*/

border-radius:50%; /*矩形圆角*/

margin-left:40px;

}

.btnBg{

width:90px; /*宽：50像素*/

height:50px;/*高：50像素*/

background:green;/*背景颜色:黑色*/

border-radius:25px; /*矩形圆角*/

}

.images img{

position:absolute; /*绝对定位,图片重叠 改变位置：left，top*/

border:white solid 9px;

box-shadow:#333 5px 5px 5px;

transition:all 1s;

}

.images img:hover{

z-index:999;

}

//js脚本

//黑色圆点 单击 黑色圆点移动

var mybtn = document.getElementById("mybtn");//创建变量(对象)

var btnBg = document.getElementById("btnBg");//创建变量(对象)

var mybody = document.body;

var flag = 1; //0代表关闭，1代表打开

mybtn.onclick = function(){

//判断 打开还是关闭

if(flag == 1){ //如果flag的值 ==(判等) 1

mybtn.style.marginLeft = "0";

flag = 0; //设置flag为关闭状态

btnBg.style.background = "gray";

mybody.style.background = "white";

}else{//否则，flag的值不是1

mybtn.style.marginLeft = "40px";

flag = 1; //设置flag为打开状态

btnBg.style.background = "green";

mybody.style.background = "gray";

}

}

//获取当前窗口的高度和宽度 mybody.offsetHeight\mybody.offsetWidth

//随意摆放图片 —— 随机 Math.random()

//alert(Math.random()*mybody.offsetWidth); //(0,1) -> (0,mybody.offsetWidth)

var imglist = document.getElementsByClassName("imglist");

for(var i=0;i<=6;i++){

imglist[i].style.top = Math.random()*(mybody.offsetHeight-400)+"px";

imglist[i].style.left = Math.random()*(mybody.offsetWidth-200)+"px";

imglist[i].style.transform = "rotate(" + parseInt(Math.random()*60-30) + "deg)";

}

var img1 = document.getElementById("img1");

img1.onmouseover = function(){

//alert();

img1.style.transform = "rotate(0deg) scale(2,2)";

}

img1.onmouseout = function(){

//alert();

img1.style.transform = "rotate(0deg) scale(1,1)";

}