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

Posted 2022-01-02 静Yu

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

翻页相册

• 引言
• 操作效果
• 代码学习
• • • 1.HTML部分
    • 2.CSS部分
    • 3.js部分
• 源码给你

引言

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

操作效果

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

翻页相册

代码学习

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'));

源码给你

一个点赞、一条评论，源码就是你的了！！！