H5 照片墙制作

H5 照片墙制作

一、概述

随着时代的发展，越来越多的人喜欢分享自己的照片，他们通过网络来传播，来获得别人的称赞。Html+js能够实现很多美丽的效果，能使得图片拥有更好的展示效果。

二、详细过程

1.需求分析

添加照片库，向“墙上”添加照片时随机从照片库中选择一张图片，随机给予坐标以及旋转角度，添加至照片墙上。选中某一张图片，可改变其位置与旋转角度。

初始化参数：照片墙id（用于获取展示位置。），照片集images（存储照片地址）

2.照片加入

完整代码：

/** * @desc 添加图片 */function addImage(){    o.removeChecedImg();    var imageId=parseInt(Math.random()*1000%this.images.length);    var imgBox=document.createElement("div");    imgBox.innerHTML="<img src='"+o.images[imageId].imgUrl+"/>" +        "<p>"+o.images[imageId].title+"</p>" +        "<div style='z-index: 1;position: absolute;width: 100%;height: 100%;top: 0;left: 0'></div>";    imgBox.style.position="absolute";    setTimeout(function(){       imgBox.style.top=parseInt(Math.random()*10000%(o.dom.offsetHeight-imgBox.offsetHeight))+"px";        imgBox.style.left=parseInt(Math.random()*10000%(o.dom.offsetWidth-imgBox.offsetWidth))+"px";        imgBox.style.transform="rotate("+(Math.random()*1000%180-90)+"deg)";        imgBox.lastElementChild.addEventListener("click",this.imgaeClickAction,false);        o.checkedImg=imgBox;        o.dom.appendChild(imgBox);        o.addChecedImg();    },1);}

 

随机获取一个id，该id为图片在照片库中的位置。

代码：

var imageId=parseInt(Math.random()*1000%this.images.length);

通过随机函数去得到照片坐标以及旋转角度。

代码：

imgBox.style.top=parseInt(Math.random()*10000%(o.dom.offsetHeight-imgBox.offsetHeight))+"px";imgBox.style.left=parseInt(Math.random()*10000%(o.dom.offsetWidth-imgBox.offsetWidth))+"px";imgBox.style.transform="rotate("+(Math.random()*1000%180-90)+"deg)";

效果图：

 

图一 添加图效果

3.旋转效果

旋转效果是去改变box的transform中rotate来实现的。提取之前的角度选用了正则表达式。

完整代码：

//逆时针旋转

var deg=o.checkedImg.style.transform.match(/[-]{0,1}\d+/)||0;deg=(deg-2)%360;o.checkedImg.style.transform="rotate("+deg+"deg)";//顺时针旋转var deg=o.checkedImg.style.transform.match(/[-]{0,1}\d+/)||0;deg=(deg-0+2)%360;o.checkedImg.style.transform="rotate("+deg+"deg)";

(checkedImg为被选中的图片)

效果图：

 

图二 顺时针旋转效果

4.拖动效果

拖动实现原理是点击时记录鼠标所在位置，拖动时再次获得鼠标坐标并计算偏移量。然后根据偏移量重新设置其位置。

完整代码

/** * @desc 鼠标按下 * @param event */function mousedownAction(event){    o.point.Y=event.clientY;    o.point.X=event.clientX;    o.checkedImg.lastElementChild.onmousemove=o.mousemoveAction;}/** * @desc 鼠标移动 * @param event */function mousemoveAction(event){    o.checkedImg.style.top=(event.clientY- o.point.Y+o.checkedImg.offsetTop)+"px";    o.checkedImg.style.left=(event.clientX- o.point.X+o.checkedImg.offsetLeft)+"px";    o.point.Y=event.clientY;    o.point.X=event.clientX;}/** * @desc 鼠标松开或者移开。 */function mouseoutAction(){    o.checkedImg.lastElementChild.onmousemove=null;}

效果图：

 

图三 拖拽效果

 

3.优化

为了得到更好的效果，添加参数：imageBoxStyle,imageStyle,titleStyle,分别用来设置照片盒子样式，图片样式，标题样式。更利于用户更改效果。

改变代码：

imgBox.innerHTML="<img src='"+o.images[imageId].imgUrl+"' style='"+o.imageStyle+"'/>" +    "<p style='"+o.titleStyle+"'>"+o.images[imageId].title+"</p>" +    "<div style='z-index: 1;position: absolute;width: 100%;height: 100%;top: 0;left: 0'></div>";imgBox.setAttribute("style",o.imageBoxStyle);

照片旋转角度获取改为，添加属性{number}angle，不再使用正则表达式获取，这样避免了transform中有其它的数字导致获取失败。

初始化时避免参数过多，选用了NODE

示例：

/***
 * {
 *      boxId:"",
 *      imageBoxStyle:"",
 *      imageStyle,
 *      titleStyle:"",
 *      images:[{
 *          imgUrl:"",
 *          title:""
 *      },
 *      {
 *          imgUrl:"",
 *          title:""
 *      }]
 * }
 */

 

三、结束语

这次做的挺简陋的，不过学习一门语言就需要多练习，但是练习不能盲目，因为想法更重要。不要弄得学完了之后让你做类似的东西就不会了。

<script src="https://code.csdn.net/snippets/2530693.js"></script>