js制作照片墙

题目：制作一个照片墙

                王子昌

一、设计目的：

   1、现在越来越多的人晒自拍，发动态，想要更多的人了解自己，照片墙可以作为一种形式来向大家展示一下自己。

   2、主要功能：

      1 支持用户自定义添加图

2 支持图片的旋转

      3 支持图片的点击移动效果

    4   图片自动添加边框

二 、设计思路：

  1、向浏览器界面存放照片：

  首先应该向照片墙增加照片：如果要使外表展现的更加美观的话：浏览器存放照片的时候，(1)在存放图片的时候应该给随机一个角度，用户可以自行选中图片调整角度，(2) 存放图片的时候如果前面的图片把后面的图片盖住的话，用户可以随意移动图片的位置(3) 用户被选中的图片座位Z-index值最大的图片显示在页面的最前端。

 

  在我们往页面中添加图片的时候，应该选用一种数据结构来存放图片的地址，我用的是数组，当然也可以用对象或者其他的数据结构来存放图片或者图片的地址；

Varimag=["imag/1.jpg","imag/2.jpg","imag/3.jpg","imag/4.jpg","imag/5.jpg","imag/6.jpg"];

在往图片中添加图片的时候

 

1、随机图片的旋转角度

2、随机图片的位置

3、给每个图片附上z-index

 

我用了一个增加图片的方法来添加初始化图片；这个方法包括给每个图片增加上事件，下面每一步代码都有注释，请看逻辑：

function add(){

 

                 //随机图片的位置

                 varleft=parseInt(Math.random()*1000);

                 vartop=parseInt(Math.random()*200);

                 var deg=parseInt(Math.random()*1000);

// 创建 img节点，付给节点的图片地址；再将节点添//加到div中

 

                 varimg=document.createElement("img");

                 img.src=imag[h];

                 img.style.transform="rotate("+deg+"deg)";

                 img.style.position="absolute";

                 img.style.left=left+"px";

                 img.style.top=top+"px";

//付给z-index值，增加事件，鼠标之上去的时候，z-index的值加1 图片移动到最上面

 

                 img.style.zIndex=i;

                 img.οnmοuseοver=function(){

                     img.style.zIndex=i;

                     i++;

                 }

                 vardeg=30;

//增加点击事件，用户每点一次，图片旋转30度

 

                 img.οnclick=function(){

//                   var event=arguments[0];

//                   event.target;//  这个就是this

                     img.style.transform="rotate("+deg+"deg)";

                     deg+=30;

                 }

                 //点上去将图片移动

 

                 img.οnmοusedοwn=xuanzhong;

                 div.appendChild(img);

                 h++;//一共六张图片  添加图片用的

                 if(h==6){

                     h=0;

                 }

          }

二、实现移动图片的方法：

   首先应该理清一下逻辑：当用户鼠标按下去的时候应该是选中图片，然后图片跟着鼠标移动，然后松开鼠标的时候图片就自动放下了。有两种差不多的思路；

 

(1) 给图片增加三个事件 分别是鼠标按下、鼠标移动、鼠标松开，只有当鼠标点下去的时候一共触发两个个时间为了使第二个事件只有在鼠标点下去的生效这就可以用一个flag来控制鼠标移动事件的产生，当鼠标按下去的时候flag=1，

这时候鼠标移动事件的函数里面的内容才执行；

 

(2) 跟第一种的思路差不多，只不过是献给图片一个鼠标点下去的事件，当鼠标点下去的时候才给图片增加其他两个事件

 

   代码如下：

       function xuanzhong(e){

 

//点击事件获取被电击的对象

              var img=e.target;

//点击之后flag为1 这时候鼠标移动事件才会执行

 

              flag=1;

//增加鼠标移动事件

 

              img.οnmοusemοve=function(){

                     if(flag){

//e.clientX，e.clientY获取鼠标移动的位置，使图片跟随鼠标移动，这里应该减去一个鼠标相对于图片的位置坐标e.offsetX跟e.offsetY，这样的目的是鼠标点击图片的那个位置，鼠标相对于图片的位置不改变。

 

                         img.style.left=(e.clientY-e.offsetX)+"px";

                         img.style.top=(e.clientYe.offsetY)+"px";

                         x=e.clientY-e.offsetX;

                         y=e.clientY-e.offsetY;                     }

                }

//给图片增加鼠标弹起事件，当鼠标按下去的时候，固定图片的位置，flag=0；鼠标移动事件函数将不再执行

 

              img.οnmοuseup=function(){

                  img.style.left=x+"px";

                  img.style.left=y+"px";

                  flag=0;

              }

           }

 

  三、定义图片存储的位置，跟增加图片的按钮：