钢材做那个网站好,wordpress商业站,国产crm系统91,星沙做淘宝店铺网站目录
写在前面
HTML简介
完整代码
代码分析
系列推荐
写在最后 写在前面
本期小编给大家带来一个炫酷的旋转相册#xff0c;快来解锁属于你的独家记忆吧#xff01;
HTML简介
HTML#xff08;全称为超文本标记语言#xff09;是一种用于创建网页结构和内容的标记语…
目录
写在前面
HTML简介
完整代码
代码分析
系列推荐
写在最后 写在前面
本期小编给大家带来一个炫酷的旋转相册快来解锁属于你的独家记忆吧
HTML简介
HTML全称为超文本标记语言是一种用于创建网页结构和内容的标记语言。它由一系列标签组成通过这些标签来描述网页中的各个元素如标题、段落、图像、链接等。HTML是一种基础的互联网技术是构建网页的基石。
HTML由W3C万维网联盟开发并维护它的目标是通过标准化的语法来确保网页在不同的浏览器和设备上都能正确显示。HTML的语法相对简单使用起来非常容易上手。
HTML的主要特点是语义化、跨浏览器兼容和可访问性。它通过使用具有特定含义的标签来描述网页元素使得搜索引擎可以更好地理解网页内容提高网页的可读性和可维护性。HTML还提供了一些特性和技术如CSS层叠样式表和JavaScript用于增强网页的样式和功能。
在编写HTML时可以使用文本编辑器如Notepad或Sublime Text并将文件保存为以.html为扩展名的文件。然后可以通过浏览器打开HTML文件来查看网页的效果。
总之HTML是一种用于创建网页结构和内容的标记语言它是互联网的基础技术之一。通过使用HTML可以创建具有语义化、跨浏览器兼容和可访问性的网页提高网页的可读性和可维护性。
完整代码
!DOCTYPE html
html onselectstartreturn falsehead langen/*onselectstartreturn false*/meta charsetUTF-8titleLove/titlestyle typetext/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
/headbodydiv idperspectivediv idwrapimg srcimage.jpg /img srcimage.jpg /img srcimage.jpg /img srcimage.jpg /img srcimage.jpg /img srcimage.jpg /img srcimage.jpg /img srcimage.jpg /img srcimage.jpg /img srcimage.jpg /img srcimage.jpg /img srcimage.jpg /img srcimage.jpg /img srcimage.jpg /img srcimage.jpg /p/p/div/divscript typetext/javascriptwindow.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:nowXpx;top:nowYpx;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 idperspective容器用于设置3D透视效果。 - 在perspective容器内有一个div idwrap其中包含一系列重复的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/1386528692HTML元素周期表https://want595.blog.csdn.net/article/details/1386536533HTML黑客帝国字母雨https://want595.blog.csdn.net/article/details/1386540544HTML五彩缤纷的爱心https://want595.blog.csdn.net/article/details/1386545815HTML飘落的花瓣https://want595.blog.csdn.net/article/details/1387853246789101112131415161718192021222324252627
写在最后
我是一只有趣的兔子感谢你的喜欢
