新建文件目录
在Hbuilder中新建文件夹，分别建立img、html，css和js文件。
图1
搭建整体图片存放器
创建一个id为total的无序列表（ul），作为总体图片的容器。
|
<body> <ul id="total"></ul> </body> |
用JS代码来编辑页面
（1）将ul排列列表设置为3行5列，便于碎片小图片的排列；设置容器的宽度和高度，并且通过offsetWidth和offsetHeight来获取对象（自己）的宽和高，以便精确。
|
var cols=5; var rows=3; document.getElementById("total").style["width"]="980px"//获取total的id，并设置它的宽度 document.getElementById("total").style["height"]="800px"//获取total的id，并设置它的高度
var w=document.getElementById("total").offsetWidth//获取宽度 var h=document.getElementById("total").offsetHeight;//获取高度 |
（2）利用for循环来插入图片，为碎片小图片创建类名divclass，并设置其属性，其中，transform ：scale(0.9)是为了让小图片与背景颜色产生间隔，从而产生边框；下面设置列表的属性时原理同上。
|
//插入图片 for(var r = 0;r<rows;r++) { for(var c = 0;c<cols;c++) { var tmpdiv = document.createElement("div");//创建存放图片的小框框 tmpdiv.className = "divclass";//类名 tmpdiv.style["background"] = 'url(img/'+(r*cols+c+1)+'.jpg';//设置背景样式 tmpdiv.style["transform"] = "scale(0.9)";//边框 tmpdiv.style["width"] = w/cols + "px"; tmpdiv.style["height"] = h/rows + "px";
//列表 var tmpli = document.createElement("li"); tmpli.style["width"] = w/cols + "px"; tmpli.style["height"] = h/rows + "px"; tmpli.className = "liclass";//类名 tmpli.style["left"] = Math.floor(w/cols)*c+'px';//小列标的位置（位置是绝对的，数值向下取整） tmpli.style["top"] = Math.floor(h/rows)*r+'px'; } } |
（3）为图片添加旋转的效果。
|
//实现旋转图片效果 tmpli.style["transform"] = 'scale(0.9) rotate('+(Math.random()*40-20)+'deg)'+ 'translateX(' +(40*c-80)+'px)'+ 'translateY(' +(40*r-80)+'px)' //在这里rotate是随机旋转的角度；Math.random()*40-20是为了让图片旋转更加好看
tmpli.appendChild(tmpdiv); document.getElementById("total").appendChild(tmpli); |
（4）添加点击小图片时，碎片合成大图片的效果。为每个列表添加一个点击事件，使得鼠标点击列表框里的小图片时，都有合成大图片的效果。
|
//点击图片时的变化效果 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 ) }
|
引入css来美化页面
|
body{ background: steelblue; } ul{ list-style: none;/*列表样式：无*/ margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0;/*状态：居中*/ /*border: 1px solid red;*/
} .liclass{ position: absolute; background-color: #fff; /*小图片背景颜色*/ transition: transform 1500ms ease-out;/*设置变换效果，线性移动*/ } .divclass{ background-size: 100% 100%; transition: transform 1500ms ease-out; } |
效果图：
图2
图3
END
实习主编 | 王楠岚
责 编 | 江南沐雪
where2go 团队