html+css+js 制作表白翻页相册

💛作者主页：静Yu
🧡简介：CSDN全栈优质创作者、华为云享专家、前端知识交流社区创建者
💛社区地址：https://bbs.csdn.net/forums/JingYu
🧡私信我获取源码，点赞、关注、评论

引言

每逢佳节或者女朋友生日是不是不知道该准备什么惊喜、送什么礼物。今天我来教你一手，简单易操作、不需要深度的前端学习，准备一份不一样的礼物。

操作效果

废话不多说，直接上效果视频。

翻页相册

代码学习

1.HTML部分

HTML部分就是通过简单地列表标签和容器标签组成。
项目整体是通过<ul>无序列表标签构成和列表项目标签<li>配合使用，一共为12列，而每一列又定义为一个块，由块级元素<div>完成。
每个<div>标签中是一张照片定义了照片的高度和宽度。
部分源码如下：

       <li>
           <div class='picBox'>
             <div class='show'>
              <img height='180px' width='180px' src='img/pic1.png'>
             </div>
                <div class='hide'>
                        <h3>
                           我❥
                        </h3>
                </div>
            </div>
       </li>
 <li>
                <div class='picBox'>
                    <div class='show'>
                        <img height='180px' width='180px' src='img/pic2.png'>
                    </div>
                    <div class='hide'>
                        <h3>
							好❥
                        </h3>
                    </div>
                </div>
            </li>

2.CSS部分

*{
    margin:0;
}
body{
	background-color: #2F2F2F;
}
.wrapper{
    max-width:900px;
    margin:80px auto;
}
.wrapper li{
    position: relative;
    width: 180px;
    height: 180px;
    list-style:none;
    margin: 5px;
    display: inline-block;
    perspective: 300px;
  }
  .picBox{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform-style: preserve-3d;
    transform-origin: 50% 50% -90px;
    animation: 200ms ease-out 0ms 1 normal forwards;
  }

3.js部分

在HTML部分会引入js文件，代码如下：

   <script src="js/jquery.min.js"></script>
    <script src="js/demo.js"></script>

demo.js

function Index(node) {
    this.node = node;
    this.init();
};
Index.prototype.init = function () {
    var self = this;
    this.nodes = [];
    Array.prototype.slice.call(self.node, 0).forEach(function (item, index) {
        self.nodes.push(self.update(item));
        self.bindEvents(item, index);
    });
};
Index.prototype.update = function (item) {
    return {
        w: item.offsetWidth,
        h: item.offsetHeight,
        l: item.offsetLeft,
        t: item.offsetTop
    }
};
Index.prototype.bindEvents = function (item, index) {
    var self = this;
    $(item).on('mouseenter', function (e) {
        self.addClass(e, item, 'in', index);
        return false;
        
    })
    $(item).on('mouseleave', function (e) {
        self.addClass(e, item, 'out', index);
        return false;
    })
};
Index.prototype.addClass = function (e, item, state, index) {
    var direction = this.getDirection(e, index);
    var class_suffix = '';
    switch (direction) {
        case 0:
            class_suffix = '-top'; 
            break;
        case 1:
            class_suffix = '-right'; 
            break;
        case 2:
            class_suffix = '-bottom';
            break;
        case 3:
            class_suffix = '-left'; 
            break;
    }
    item.className = '';
    item.classList.add(state + class_suffix);
};
Index.prototype.getDirection = function (e, index) {
    var w = this.nodes[index].w,
        h = this.nodes[index].h,
        x = e.pageX - this.nodes[index].l - w / 2 ,
        y = e.pageY - this.nodes[index].t - h / 2 ;
        // 取到x,y两点坐标
        d=(Math.round(((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90)+3) % 4;

    
    return d;//d的数值用于判断方向上下左右。
};
new Index($('li'));

源码给你

一个点赞、一条评论，源码就是你的了！！！
微信搜索：知识小海洋，回复[翻页相册],源码放里面了