H5 照片墙制作

╰+哭是因爲堅強的太久メ 2022-06-10 06:40 307阅读 0赞

**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)";

效果图：

![Center][]

图一  添加图效果

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为被选中的图片)

效果图：

![SouthEast][]

图二  顺时针旋转效果

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

效果图：

![SouthEast 1][]

图三  拖拽效果

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:""  
 \*      \}\]  
 \* \}  
 \*/*

三、**结束语**

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

[Center]: /images/20220610/67dd40994b3c496c891a00b96e76d0f7.png
[SouthEast]: /images/20220610/324f600075de49bfb241825e0fca4fc4.png
[SouthEast 1]: /images/20220610/576a63374f824dba93c0fc5b3b6db81b.png