前端|纯JS实现碎片合成大图

算法与编程之美

发布于 2020-09-01 16:07:52

2.1K0

发布于 2020-09-01 16:07:52

文章被收录于专栏：算法与编程之美算法与编程之美

新建文件目录

在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;

}

效果图：