//点击图片时的变化效果 var chan = true; var liclick = document.getElementsByName("li");//为每个列表添加一个点击事件 for(let i = 0; i < liclick.length;i++)//先后取到每个列表 { liclick[i].addEventListener( "click", //添加参数click function(){ if(chan==true) //第一次点击,图片放大 { var Img = liclick[i].children[0].style["backgroudImg"];//通过children来获取到子节点 var left = 0; var top = 0; //遍历一下所有的列表 for(let j = 0;j < liclick.length;j++) { liclick[j].style["transform"] = 'rotate(0deg)'+ //列表回正 'translateX(0)'+ 'translateY(0)' let lidiv = liclick[j].children[0];//获取到每个列表的div lidiv.style["backgroudImg"] = Img;//为每一个div添加点击的背景 lidiv.style["backgroud-size"] = w+"px "+h+"px"; //通过位移来实现大图片效果 lidiv.style["backgroudPosition"] = (-Left)+"px "+(-Top)+"px" lidiv.style["transform"] = "scale(1)" left +=Math.floor(w/cols);//每次位移都要添加一张图片的宽度(总体宽度除以列值),当宽度达到整体宽度时,移到下一行 if(left>=w){ Top +=Math.floor(h/rows) left = 0; } } chan = false; }else //点击图片复原 if(chan == false) { for(let j = 0;j < liclick.length;i++) { let r = Math.floor(j/rows); let c = j-r*cols; let lidiv = liclick[j].children[0]; lidiv.style["backgroud-size"] = "100% 100%"; lidiv.style["backgroudImg"] = 'url(img/'+(r*cols+c+1)+'.jpg'; liclick.style["transform"] = 'scale(0.9) rotate('+(Math.random()*40-20)+'deg)'+ 'translateX(' +(40*c-80)+'px)'+ 'translateY(' +(40*r-80)+'px)' } chan = false; } }, false ) } |