HTML炫酷的相册

目录

写在前面

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

写在最后

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/11714.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

前端笔记-day06

前端笔记-day06

文章目录 01-浮动-基本使用02-浮动-产品布局03-浮动-清除浮动带来的影响04-清除浮动-额外标签法05-清除浮动-单伪元素法06-清除浮动-双伪元素法单伪元素和双伪元素CSS 07-清除浮动-overflow08-flex布局-体验09-flex布局-组成10-flex布局-主轴对齐方式11-flex布局-侧轴对齐方式1…
阅读更多...
vuex核心概念-getters

vuex核心概念-getters

除了state之外&#xff0c;有时我们还需要从state中派生出一些状态&#xff0c;这些状态是依赖state的&#xff0c;此时会用到getters。
阅读更多...
景源畅信：小白如何做抖音电商怎么样？

景源畅信：小白如何做抖音电商怎么样？

在数字浪潮中崛起的抖音电商&#xff0c;以其独特的平台优势吸引了众多创业者的目光。特别是对于初入电商领域的“小白”来说&#xff0c;如何在这个全新的领域站稳脚跟&#xff0c;成为他们迫切需要解答的问题。接下来&#xff0c;我们将深入探讨小白如何在抖音电商中开辟属于…
阅读更多...
课时124：awk实践_进阶知识_逻辑运算

课时124：awk实践_进阶知识_逻辑运算

1.2.3 逻辑运算 学习目标 这一节&#xff0c;我们从 基础知识、简单实践、小结 三个方面来学习 基础知识 简介 所谓的逻辑运算&#xff0c;其实指的就是 与或非的操作。基本语法格式如下&#xff1a;与&& - 并且关系或|| - 或者关系非&#xff01; - 取反关系简单实…
阅读更多...
蓝桥杯备战18.[蓝桥杯 2021 省 AB] 砝码称重

蓝桥杯备战18.[蓝桥杯 2021 省 AB] 砝码称重

P8742 [蓝桥杯 2021 省 AB] 砝码称重 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include<bits/stdc.h> using namespace std; #define endl \n #define int long long const int N 2e510; int a[N],w[N]; signed main() {std::ios::sync_with_stdio(0),cin.tie(0…
阅读更多...
Golang的select底层数据结构与特性

Golang的select底层数据结构与特性

select关键字用于处理同时来自多个通道的数据。它的基本工作原理是“随机选择”满足条件的分支去执行。如果没有分支满足条件(即所有通道都无法读/写)&#xff0c;select会阻塞&#xff0c;直到有分支满足条件。如果select包含default分支&#xff0c;当其他分支都不满足条件时…
阅读更多...
使用 Python 中的 TensorFlow 检测垃圾短信

使用 Python 中的 TensorFlow 检测垃圾短信

前言 系列专栏&#xff1a;机器学习&#xff1a;高级应用与实践【项目实战100】【2024】✨︎ 在本专栏中不仅包含一些适合初学者的最新机器学习项目&#xff0c;每个项目都处理一组不同的问题&#xff0c;包括监督和无监督学习、分类、回归和聚类&#xff0c;而且涉及创建深度学…
阅读更多...
Python实现对线程的监控及异常时强制杀死线程的技术方案探讨

Python实现对线程的监控及异常时强制杀死线程的技术方案探讨

在Python中&#xff0c;使用threading库创建的线程并没有提供一个直接的方式来“杀死”或强制停止一个线程。这是因为强制终止线程可能会导致程序状态不一致、数据损坏或资源未正确释放等问题。Python设计者选择不在threading模块中提供这样的功能&#xff0c;以鼓励更安全的编…
阅读更多...
UIKit常用API:Transform

UIKit常用API:Transform

需求 使用Transform系列的API&#xff0c;该API中提供了旋转、平移等功能。其中函数中带make的效果是只变化一次&#xff0c;不带make可变化多次。此外&#xff0c;还有恢复函数&#xff1a;CGAffineTransformIdentity。 代码实现 注意按钮绑定的是同一个响应事件&#xff0…
阅读更多...
漏洞修复：TLS Client-initiated重协商攻击（CVE-2011-1473）

漏洞修复：TLS Client-initiated重协商攻击（CVE-2011-1473）

目录 一、漏洞描述 二、漏洞验证 三、实现方式 四、解决方法 1.通过代码添加 2.通过启动参数添加 五、openssl s_client命令 一、漏洞描述 服务器支持 TLS Client-initiated 重协商攻击(CVE-2011-1473)【原理扫描】 使用绿盟等漏洞扫描工具扫描https端口的服务时可能会…
阅读更多...
使用Halcon进行图像预处理的策略

使用Halcon进行图像预处理的策略

图像预处理是机器视觉系统中的一个关键步骤&#xff0c;它有助于提高图像质量&#xff0c;从而使得后续的图像分析和特征提取更加准确。在 Halcon 中&#xff0c;图像预处理通常包括滤波、对比度增强、归一化、边缘增强等操作。以下是一些使用 Halcon 进行图像预处理的策略&…
阅读更多...
【React】React的懒加载组件lazy和Suspense

【React】React的懒加载组件lazy和Suspense

在一个多路由项目中&#xff0c;页面加载时&#xff0c;所有的路由组件都会被加载 如果我们有很多个路由组件&#xff0c;但是用户只点击了几个&#xff0c;这就会有很大的消耗&#xff0c;因此我们需要做懒加载处理&#xff0c;我们点击哪个时&#xff0c;才去加载哪一个 而Re…
阅读更多...
2.数据类型与变量（java篇）

2.数据类型与变量（java篇）

目录 数据类型与变量 数据类型 变量 整型变量 长整型变量 短整型变量 字节型变量 浮点型变量 双精度浮点型 单精度浮点型 字符型变量 布尔型变量&#xff08;boolean&#xff09; 类型转换 自动类型转换(隐式) 强制类型转换(显式) 类型提升 字符串类型 数据类…
阅读更多...
go使用nacos作为配置中心时遇到的一个错误

go使用nacos作为配置中心时遇到的一个错误

docker安装nacos如下&#xff08;有坑&#xff09;&#xff1a; 一文教你使用 Docker 启动并安装 Nacos-阿里云开发者社区 报错如下&#xff1a; read config from both server and cache fail, errread cache file Config Encrypted Data Key failed. cause file doesnt ex…
阅读更多...
百亿补贴为什么用 H5？H5 未来会如何发展？

百亿补贴为什么用 H5？H5 未来会如何发展？

百亿补贴为什么用 H5&#xff1f;H5 未来会如何发展&#xff1f; 本人有一些分析预测。当然&#xff0c;这些分析预测只是个人观点&#xff0c;如果你有不同的意见&#xff0c;欢迎在评论区讨论交流。 百亿补贴为什么用 H5 我们先看两张图&#xff0c;在 Android 手机开发者…
阅读更多...
java设计模式 建造者设计模式

java设计模式 建造者设计模式

建造者模式&#xff08;Builder Pattern&#xff09;是一种设计模式&#xff0c;用于将复杂对象的构建与其表示分离&#xff0c;以便同样的构建过程可以创建不同的表示。以下是建造者模式的一个案例分析&#xff0c;以及在Java中的实现。 ### 案例分析 假设我们要设计一个用于…
阅读更多...
单元测试与集成测试：软件质量的双重保障

单元测试与集成测试：软件质量的双重保障

目录 概述 单元测试 集成测试 单元测试的方法 白盒测试 黑盒测试 白盒测试的方法和用例设计 代码审查 集成测试 单元测试工具 结语 在软件开发中&#xff0c;测试是一个不可或缺的环节&#xff0c;它能够帮助我们发现和修复缺陷&#xff0c;确保软件的质量和可靠性。…
阅读更多...
基于UDP的网络客户端和服务端模型IO函数

基于UDP的网络客户端和服务端模型IO函数

服务器端 udp_server.c #include <stdio.h> // 引入标准输入输出库 #include <sys/types.h> // 引入基本系统数据类型 #include <sys/socket.h> // 引入socket编程相关的库 #include <netinet/in.h> // 引入网络…
阅读更多...
2024年3月 青少年等级考试机器人理论真题二级

2024年3月 青少年等级考试机器人理论真题二级

202403 青少年等级考试机器人理论真题二级 第 1 题 一个机器小车&#xff0c;用左右两个电机分别控制左右车轮&#xff0c;左侧电机转速是100rpm&#xff0c;右侧电机转速是50rpm&#xff0c;则此机器小车&#xff1f;&#xff08; &#xff09; A&#xff1a;原地右转 B&am…
阅读更多...
华企盾DSC数据防泄密软件有哪些水印功能？

华企盾DSC数据防泄密软件有哪些水印功能？

在企业数据安全领域&#xff0c;水印技术是一种重要的信息保护策略&#xff0c;用于防止数据泄露和确保信息的原始性和完整性。根据回顾的资料&#xff0c;以下是企业中常用的几种水印技术&#xff1a; 屏幕浮水印&#xff1a;这种水印能够在用户的屏幕上显示公司的标志或者其他…
阅读更多...
最新文章

Copyright @ 2022~2023