当前位置： 首页 > news >正文

HTML炫酷的相册

news 2026/5/19 12:48:18

目录

写在前面

HTML简介

完整代码

代码分析

系列推荐

写在最后

写在前面

本期小编给大家带来一个炫酷的旋转相册，快来解锁属于你的独家记忆吧！

HTML简介

HTML（全称为超文本标记语言）是一种用于创建网页结构和内容的标记语言。它由一系列标签组成，通过这些标签来描述网页中的各个元素，如标题、段落、图像、链接等。HTML是一种基础的互联网技术，是构建网页的基石。

HTML由W3C（万维网联盟）开发并维护，它的目标是通过标准化的语法来确保网页在不同的浏览器和设备上都能正确显示。HTML的语法相对简单，使用起来非常容易上手。

HTML的主要特点是语义化、跨浏览器兼容和可访问性。它通过使用具有特定含义的标签来描述网页元素，使得搜索引擎可以更好地理解网页内容，提高网页的可读性和可维护性。HTML还提供了一些特性和技术，如CSS（层叠样式表）和JavaScript，用于增强网页的样式和功能。

在编写HTML时，可以使用文本编辑器，如Notepad++或Sublime Text，并将文件保存为以.html为扩展名的文件。然后，可以通过浏览器打开HTML文件来查看网页的效果。

总之，HTML是一种用于创建网页结构和内容的标记语言，它是互联网的基础技术之一。通过使用HTML，可以创建具有语义化、跨浏览器兼容和可访问性的网页，提高网页的可读性和可维护性。

完整代码

<!DOCTYPE html>
<html onselectstart="return false"><head lang="en">/*onselectstart="return false"*/<meta charset="UTF-8"><title>Love</title>><style type="text/css">* {margin: 0;padding: 0;}body {background: #000;overflow: hidden;}#perspective {perspective: 800px;}#wrap {width: 120px;/*133:200  4:6  */height: 180px;margin: 0 auto;position: relative;/*搭建3D效果必须的两个属性：一个变换风格变3d，一个场景景深800px*/transform-style: preserve-3d;transform: rotateX(-10deg) rotateY(0deg);}#wrap img {width: 100%;height: 100%;position: absolute;border-radius: 5px;/*加上圆角*/box-shadow: 0px 0px 10px #fff;/*box-shadow 属性向框添加一个或多个阴影*/-webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%);}#wrap p {width: 1200px;height: 1200px;background: -webkit-radial-gradient(center center, 600px 600px, rgba(244, 23, 234, 0.2), rgba(0, 0, 0, 0));border-radius: 100%;position: absolute;left: 50%;top: 102%;margin-left: -600px;margin-top: -600px;transform: rotateX(90deg);}</style>
</head><body><div id="perspective"><div id='wrap'><img src="image.jpg" /><img src="image.jpg" /><img src="image.jpg" /><img src="image.jpg" /><img src="image.jpg" /><img src="image.jpg" /><img src="image.jpg" /><img src="image.jpg" /><img src="image.jpg" /><img src="image.jpg" /><img src="image.jpg" /><img src="image.jpg" /><img src="image.jpg" /><img src="image.jpg" /><img src="image.jpg" /><p></p></div></div><script type="text/javascript">window.onload = function () {var oWrap = document.getElementById('wrap');var oImg = oWrap.getElementsByTagName('img');var oImgLength = oImg.length;var Deg = 360 / oImgLength;var nowX, nowY, lastX, lastY, minusX = 0, minusY = 0;var roY = 0, roX = -10;var timer;for (var i = 0; i < oImgLength; i++) {oImg[i].style.transform = 'rotateY(' + i * Deg + 'deg) translateZ(350px)';oImg[i].style.transition = 'transform 1s ' + (oImgLength - 1 - i) * 0.1 + 's';}mTop();window.onresize = mTop;function mTop() {var wH = document.documentElement.clientHeight;oWrap.style.marginTop = wH / 2 - 180 + 'px';}// 拖拽：三个事件-按下 移动 抬起//按下document.onmousedown = function (ev) {ev = ev || window.event;//鼠标按下的时候，给前一点坐标赋值，为了避免第一次相减的时候出错lastX = ev.clientX;lastY = ev.clientY;//移动this.onmousemove = function (ev) {ev = ev || window.event;clearInterval(timer);nowX = ev.clientX; // clientX 鼠标距离页面左边的距离nowY = ev.clientY; // clientY ………………………………顶部………………//当前坐标和前一点坐标差值minusX = nowX - lastX;minusY = nowY - lastY;//更新wrap的旋转角度，拖拽越快-> minus变化大 -> roY变化大 -> 旋转快roY += minusX * 0.2; // roY = roY + minusX*0.2;roX -= minusY * 0.1;oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';/*//生成div，让div跟着鼠标动var oDiv = document.createElement('div');oDiv.style.cssText = 'width:5px;height:5px;background:red;position:fixed;left:'+nowX+'px;top:'+nowY+'px';this.body.appendChild(oDiv);*///前一点的坐标lastX = nowX;lastY = nowY;}//抬起this.onmouseup = function () {this.onmousemove = null;timer = setInterval(function () {minusX *= 0.95;minusY *= 0.95;roY += minusX * 0.2; // roY = roY + minusX*0.2;roX -= minusY * 0.1;oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';if (Math.abs(minusX) < 0.1 && Math.abs(minusY) < 0.1) {clearInterval(timer);}console.log(minusX);}, 13);}return false;}}</script>
</body></html>

代码分析

这段HTML、CSS和JavaScript代码实现了一个具有3D翻转效果的图像展示容器，当用户拖动鼠标时，容器会随之旋转。下面是对各部分代码功能的详细分析：

1. HTML结构：

   - 页面主体包含一个`<div id="perspective">`容器，用于设置3D透视效果。

   - 在`perspective`容器内，有一个`<div id="wrap">`，其中包含一系列重复的`<img>`元素（共15个），每个都指向同一个“image.jpg”源文件，它们将按照3D变换进行排列和显示。

   - 还有一个空的`<p>`标签，它被用来作为背景层以增强视觉效果。

2. CSS样式：

   - `body`设置了黑色背景并隐藏了滚动条。

   - `#perspective`定义了整个场景的3D透视深度为800px。

   - `#wrap`是所有图片的父容器，设置了宽度、高度、居中对齐以及初始的3D旋转角度（X轴-10度，Y轴0度）。

   - `#wrap img`样式确保每张图片大小适配其容器，并添加了圆角、阴影以及反射效果。

   - `#wrap p`创建了一个大尺寸的圆形渐变背景层，位于图片下方，通过transform将其旋转至X轴90度，起到遮罩背景的作用。

3. JavaScript脚本：

   - 当页面加载完成时，执行一些初始化工作：

   - 获取`#wrap`元素及其所有的`img`子元素。

   - 计算每个图片需要的旋转角度，并应用相应的`rotateY`和`translateZ` CSS转换属性，使得图片在3D空间内形成环形排列。

   - 调用`mTop`函数来确保`wrap`元素垂直居中于视口。

   - 定义了处理窗口大小变化的`mTop`函数，用于动态调整`wrap`元素的位置以保持垂直居中。

   - 拖拽事件处理：

   - 使用`onmousedown`、`onmousemove`和`onmouseup`事件监听鼠标操作。

   - 当鼠标按下时记录起始坐标，鼠标移动时计算坐标差值，并根据这个差值更新`wrap`元素的`rotateX`和`rotateY`属性，从而实现拖拽旋转的效果。

    - 当鼠标抬起时，使用定时器平滑地减缓旋转速度，直到停止。

总的来说，这个代码构建了一个交互式旋转的3D图片墙，用户可以通过拖动鼠标来改变视角，查看不同角度下的图片。

系列推荐

序号目录直达链接
1HTML实现3D相册https://want595.blog.csdn.net/article/details/138652869
2HTML元素周期表https://want595.blog.csdn.net/article/details/138653653
3HTML黑客帝国字母雨https://want595.blog.csdn.net/article/details/138654054
4HTML五彩缤纷的爱心https://want595.blog.csdn.net/article/details/138654581
5HTML飘落的花瓣https://want595.blog.csdn.net/article/details/138785324
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

写在最后

我是一只有趣的兔子，感谢你的喜欢！

相关文章：

HTML炫酷的相册

目录 写在前面 HTML简介 完整代码 代码分析 系列推荐 写在最后 写在前面 本期小编给大家带来一个炫酷的旋转相册&#xff0c;快来解锁属于你的独家记忆吧&#xff01; HTML简介 HTML&#xff08;全称为超文本标记语言&#xff09;是一种用于创建网页结构和内容的标记语…...

编程日记 2024/5/13 11:54:09

C++笔试强训day20

目录 1.经此一役小红所向无敌 2.连续子数组最大和 3.非对称之美 1.经此一役小红所向无敌 链接 简单模拟即可。 需要注意的是&#xff1a; 除完之后有无余数&#xff0c;若有&#xff0c;则还可以再挨一次打。 #include <iostream> using namespace std; #define in…...

编程日记 2024/5/13 11:53:08

【PHP【实战项目】系统性教学】——使用最精简的代码完成用户的登录与退出

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…...

编程日记 2024/5/13 11:52:07

Linux下的常用基本指令

基本指令 前言一、ls 指令语法功能常用选项举例注意要点关于拼接关于 -a关于文件ls与/的联用ls与根目录ls与任意文件夹ls与常用选项与路径 ls -d与ls -ldls与ll 二、pwd命令语法功能常用选项注意要点window与Linux文件路径的区别家目录 三、cd 指令语法功能举例注意要点cd路径.…...

编程日记 2024/5/13 11:51:05

phpstorm环境配置与应用

在 PhpStorm 中配置 PHP 开发环境及进行一些常用的应用设置涉及以下几个主要步骤&#xff1a; ### 1. 安装和激活 PhpStorm - **下载安装**: 访问 JetBrains 官网下载最新版本的 PhpStorm 安装包&#xff0c;然后按照提示进行安装。 - **激活**: 启动 PhpStorm&#xff0c;你可…...

编程日记 2024/5/13 11:50:04

【Qt 学习笔记】Qt常用控件 | 布局管理器 | 水平布局Horizontal Layout

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt常用控件 | 布局管理器 | 水平布局Horizontal Layout 文章编号&…...

编程日记 2024/5/13 11:49:03

Hive Aggregation 聚合函数

Hive Aggregation 聚合函数 基础聚合 增强聚合...

编程日记 2024/5/13 11:47:00

Unity 性能优化之GPU Instancing（五）

提示&#xff1a;仅供参考&#xff0c;有误之处&#xff0c;麻烦大佬指出&#xff0c;不胜感激&#xff01; 文章目录 前言一、GPU Instancing使用方法二、使用GPU Instancing的条件三、GPU Instancing弊端四、注意五、检查是否成功总结 前言 GPU Instancing也是一种Draw call…...

编程日记 2024/5/13 11:44:58

LeetCode 138. 随机链表的复制

目录 1.原题链接&#xff1a; 2.结点拆分&#xff1a; 代码实现&#xff1a; 3.提交结果&#xff1a; 4.读书分享&#xff1a; 1.原题链接&#xff1a; 138. 随机链表的复制 2.结点拆分&#xff1a; ①.拷贝各个结点&#xff0c;连接在原结点后面&#xff1b; ②.处…...

编程日记 2024/5/13 11:43:56

【PC微信小程序点不动处理方法】

描述 在使用电脑小程序抓包的时候发现原来能点的小程序今天不能点了。就是原来有个输入车牌号的输入框点击会出现车牌号键盘&#xff0c;现在不行了&#xff0c;经过卸载安装发现不是微信的问题&#xff0c;是WeChatAppEx.exe 的bug。早期使用的是不带ex的都没有问题升级以后&…...

编程日记 2024/5/13 11:39:51

量化交易：日内网格交易策略.md

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff01; 本文将详细介绍日内网格交易策略的原理&#xff0c;并结合Python代码示例&#xff0c;展示如何在掘金平台上实现这一策略。 策略原理 日内网格交易策略的核心思想是在一天的交易时间内&#xff0c;通过设置多个买卖…...

编程日记 2024/5/13 11:38:49

Ubuntu 20.04在Anaconda虚拟环境中配置PyQt4

一、创建一个虚拟环境 1 创建一个python2.7的虚拟环境&#xff1a; conda create -n pyqt4 numpy matplotlib python2.72 在环境中安装几个需要的包&#xff1a; pip install Theano pip install python-opencv3.4.0.14 pip install qdarkstyle pip install dominate二、在主…...

编程日记 2024/5/13 11:37:48

charts3D地球--添加航线

要在地球视角下画出海运路线图 方案 添加 globl 地球创建geo地理坐标系创建canvas对象用于承载地图世界地图this.worldChart //初始化canvas节点let cav document.createElement("canvas");this.$echarts.registerMap("world", geoJson);this.worldCha…...

编程日记 2024/5/13 11:36:47

变色龙还是树懒:揭示大型语言模型在知识冲突中的行为

你是知识变色龙还是树懒?我今天在ICLR学到一个很有趣的术语,叫做证据顺序(order of evidence)。 大模型RAG处理知识冲突的探讨: 在检索增强生成(Retrieval-Augmented Generation, RAG)的过程中,技术团队会将检索到的前几名文档作为证据,并提示(prompt)给大型语言模型(Large La…...

编程日记 2024/5/13 11:35:44

Android OpenMAX（四）OMX Core

假设我们已经写好了所有的OMX组件，有vdec、venc、adec、aenc，接下来问题来了，我们应该如何管理这些组件呢（创建、销毁）？这一篇文章我们向上一层学习OMX Core提供的标准API。 OMX Core代码位于 OMX_Core.h OMX Core在OpenMAX IL架构中的位置位于IL Client与实际的OMX组件之…...

编程日记 2024/5/13 11:34:43

【Linux】轻量级应用服务器如何开放端口 -- 详解

一、测试端口是否开放 1、测试程序 TCP demo 程序&#xff08;可参考&#xff1a;【Linux 网络】网络编程套接字 -- 详解-CSDN博客&#xff09; 2、测试工具 Windows - cmd 窗口 输入命令&#xff1a;telnet [云服务器的公网ip] [port] 二、腾讯云安全组开放端口 1、安全组设…...

编程日记 2024/5/13 11:33:42

git如何查看密码

git查看用户名、邮箱 git config user.name git config user.email 也可以在系统&#xff0c;用户文件夹下面 gitconfig查看 通常无法查看git密码&#xff0c;运行以下命令 git config credential.helper 查看储存的方式&#xff0c;如果是manage 或manage-store则说明是…...

编程日记 2024/5/13 11:30:38

redis脑裂问题

1. 前言 脑裂就是指在主从集群中&#xff0c;同时有两个主节点&#xff0c;它们都能接收写请求。而脑裂最直接的影响&#xff0c;就是客户端不知道应该往哪个主节点写入数据&#xff0c;结果就是不同的客户端会往不同的主节点上写入数据。而且&#xff0c;严重的话&#xff0c;…...

编程日记 2024/5/13 11:29:36

日本率先研发成功6G设备，刺痛了谁？为何日本能率先突破？

日本率先研发成功6G设备&#xff0c;无线数据速率是5G的百倍&#xff0c;这让日本方面兴奋莫名&#xff0c;毕竟日本在科技方面从1990年代以来太缺少突破的创新了&#xff0c;那么日本为何如今在6G技术上能率先突破呢&#xff1f; 日本在1980年代末期达到顶峰&#xff0c;它的科…...

编程日记 2024/5/13 11:27:34

SpringBoot自动配置源码解析+自定义Spring Boot Starter

SpringBootApplication Spring Boot应用标注 SpringBootApplication 注解的类说明该类是Spring Boot 的主配置类&#xff0c;需要运行该类的main方法进行启动 Spring Boot 应用 SpringBootConfiguration 该注解标注表示标注的类是个配置类 EnableAutoConfiguration 直译&#…...

编程日记 2024/5/13 11:25:31

阿里Sophix热更新实战：从加固App打包到补丁发布的完整避坑指南

阿里Sophix热更新深度实践&#xff1a;加固场景下的全链路解决方案 在移动应用快速迭代的今天&#xff0c;热修复技术已经成为保障应用稳定性的关键手段。阿里Sophix作为业界领先的热修复方案&#xff0c;以其高兼容性和稳定性赢得了众多开发团队的青睐。然而&#xff0c;当应用…...

编程新知 2026/5/19 12:01:56

3分钟解锁音乐自由：ncmdump让网易云音乐NCM文件随处播放

3分钟解锁音乐自由&#xff1a;ncmdump让网易云音乐NCM文件随处播放 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为网易云音乐下载的歌曲只能在特定客户端播放而烦恼吗&#xff1f;当您精心收藏的音乐被NCM加密格式束缚&…...

编程新知 2026/5/19 10:42:11

告别轮询！STM32CubeMX配置DMA串口收发485数据，并详解HAL库回调函数使用避坑

STM32CubeMX实战&#xff1a;DMA驱动RS485通信与HAL库回调机制深度解析 当我们需要在工业环境中实现稳定可靠的串行通信时&#xff0c;RS485总线因其抗干扰能力强、传输距离远等优势成为首选。而STM32系列MCU配合HAL库的开发模式&#xff0c;能够显著提升开发效率。本文将彻底改…...

编程新知 2026/5/19 10:14:06

别再只会用menuconfig了！手把手教你为ESP32项目定制专属Kconfig配置菜单

从配置使用者到设计者&#xff1a;ESP32项目中的Kconfig高级定制指南 在ESP-IDF开发环境中&#xff0c;menuconfig几乎是每个开发者每天都要接触的工具。但大多数开发者仅仅停留在"使用者"层面——他们知道如何勾选选项、调整参数&#xff0c;却很少思考这些配置菜单…...

编程新知 2026/5/19 8:07:57

科技赋能林草防火，合规筑牢生态屏障—— 杭兴智能 XHJK‑5000 / HXJK‑6000 系列智慧宣传杆适配 LY/T 2798‑2025 标准实践

森林草原是我国重要的生态资源&#xff0c;守护林草安全、防范火灾风险&#xff0c;是生态文明建设的关键一环。随着《森林草原防灭火条例》深入实施与林业行业标准化建设持续推进&#xff0c;传统人工巡护、静态标语、零散警示等方式&#xff0c;已难以满足新时期 “预防为主、…...

编程新知 2026/5/19 7:26:43

当我们谈论“防治养”时，我们谈论的是一种生活方式的重构

一、重新审视“健康”的定义在现代生活的快节奏中&#xff0c;健康常常被简化为一个医学指标&#xff0c;或是年度体检报告上的一串数字。然而&#xff0c;当我们谈论肿瘤“防治养”时&#xff0c;我们谈论的远不止于此。这不是三个孤立的概念&#xff0c;而是一个完整的循环—…...

编程新知 2026/5/19 7:02:02

如何高效配置跨平台网盘直链解析工具：技术实现与实战指南

如何高效配置跨平台网盘直链解析工具&#xff1a;技术实现与实战指南 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天…...

编程新知 2026/5/19 5:32:07

终极ncmdumpGUI指南：3步快速解密网易云音乐NCM文件

终极ncmdumpGUI指南&#xff1a;3步快速解密网易云音乐NCM文件 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换&#xff0c;Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI ncmdumpGUI是一款基于C#开发的Windows图形界面工…...

编程新知 2026/5/19 5:32:07

2025届学术党必备的六大降AI率助手解析与推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 身处人工智能生成内容也就是AIGC越来越普遍的大背景当中&#xff0c;怎样去有效地降低它被检…...

编程新知 2026/5/19 4:50:36

车载ETH数据链路层

以太网帧协议是​​数据链路层​​的核心封装格式，遵循IEEE 802.3标准。 标准以太网帧结构（IEEE 802.3）​： 前导码（7B）| 帧起始符（1B）| 目标 MAC (6B) | 源 MAC (6B) | ​​EtherType (2B)​​ | Payload (46-1500B) | FCS (4B) | ​1. 前导码 (Preamble)​​ 长度​…...

编程新知 2026/5/19 4:36:06