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="

"; 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.οnmοusemοve=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.οnmοusemοve=null;
}

效果图：

 

图三 拖拽效果

 

3.优化

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

改变代码：

imgBox.innerHTML="" +
    "
"+o.images[imageId].title+"
" +
    "
";
imgBox.setAttribute("style",o.imageBoxStyle);

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

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

示例：

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

 

三、结束语

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