💛作者主页：静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')); 源码给你

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

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。