使用html+css+js实现3D相册

使用html+css+js实现3D相册，快来上传的照片吧

效果图：

代码如下，复制即可用：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>html,body {margin: 0;padding: 0;background-color: #29454d;/*禁止文字被选中*/-moz-user-select: none;/*火狐*/-webkit-user-select: none;/*webkit浏览器*/-ms-user-select: none;/*IE10*/-khtml-user-select: none;/*早期浏览器*/user-select: none;overflow: hidden;}.box {position: relative;height: 500px;width: 500px;margin: 100px auto;transform-style: preserve-3d;perspective: 2000px;}.di {position: absolute;left: 50%;top: 50%;height: 200px;width: 200px;transform: translate(-50%, -50%) rotatex(90deg);transform-style: preserve-3d;}.z {position: relative;height: 200px;width: 200px;border-radius: 50%;transform-style: preserve-3d;/*transform: rotatez(1deg);*/}p {margin: 0;position: absolute;top: 0;/*为了保证圆心在父盒子中心，父盒子旋转时圆心稳定，所以设置left*/left: 25px;height: 200px;width: 150px;border: 2px solid #fd7068;box-sizing: border-box;background-color: #ffffff;background-size: cover;background-position: center;background-repeat: no-repeat;/*opacity: .7;*/font-size: 10px;line-height: 200px;text-align: center;/*box-shadow: 0 0 100px #16ff8b;*//*倒影，不兼容*/-webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.5));box-reflect: below 10px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.5));/*backface-visibility: hidden;*/}</style>
</head><body>
<div class="box"><div class="di"><div class="z"><p>可以拖拽图片文件进来</p><p>可以拖拽图片文件进来</p><p>可以拖拽图片文件进来</p><p>可以拖拽图片文件进来</p><p>可以拖拽图片文件进来</p><p>可以拖拽图片文件进来</p><p>可以拖拽图片文件进来</p><p>可以拖拽图片文件进来</p><p>可以拖拽图片文件进来</p><p>可以拖拽图片文件进来</p><p>可以拖拽图片文件进来</p><p>可以拖拽图片文件进来</p></div></div>
</div>
<script>window.onload = function () {setPs();move();drop();}//给每个p标签设置位置function setPs() {var ps = document.getElementsByTagName('p');for (var i = 0; i < ps.length; i++) {ps[i].style.transform = 'rotatex(-90deg) rotatey(' + i * 30 + 'deg) translatez(400px)'}}//鼠标拖动旋转function move() {var zBox = document.querySelector('.z');var xBox = document.querySelector('.di');//声明计算鼠标移动速度用的变量var speedTimer = null;var speedX = 0;var speedY = 0;//声明记录旋转角度的两个变量var xDegNow = 90;var zDegNow = 0;//声明变量记录要旋转的角度var xDegDistance = 0;var zDegDistance = 0;//声明变量记录是否发生鼠标移动事件var isMove = false;window.onmousedown = function (e) {//鼠标按下//清除过渡属性
            xBox.style.transition = '';zBox.style.transition = '';//记录按下的坐标以及计算速度的初始坐标var xstart = e.clientX;var speedX_start = xstart;var ystart = e.clientY;var speedY_start = ystart;//记录用来计算速度的初始时间var tstart = new Date().getTime();var tnow = tstart;//设置计时器更新计算速度的当时时间
            speedTimer = setInterval(function () {tnow = new Date().getTime();},10)window.onmousemove = function (e) {//鼠标移动
                isMove = true;//记录当时的坐标计算距离var xnow = e.clientX;var ynow = e.clientY;var xDistance = xnow - xstart;var yDistance = ynow - ystart;//如果计时超过一定时间（10毫秒），计算速度if (tnow - tstart >= 10) {//速度=（现在的坐标-初始坐标）/（现在时间-初始时间）
                    speedX = (xnow - speedX_start) / (tnow - tstart);speedY = (ynow - speedY_start) / (tnow - tstart);//让初始时间和坐标等于现在的时间和坐标
                    tstart = tnow;speedX_start = xnow;speedY_start = ynow;}//把鼠标移动距离计算成角度后设置到页面上
                zDegDistance = zDegNow - (xDistance / 10);zBox.style.transform = 'rotatez(' + zDegDistance + 'deg)';xDegDistance = xDegNow - (yDistance / 10);xDegDistance = xDegDistance > 179 ? 179 : xDegDistance < 1 ? 1 : xDegDistance;xBox.style.transform = 'translate(-50%,-50%) rotatex(' + xDegDistance + 'deg)';};};window.onmouseup = function (e) {//鼠标松开//清除计时器 清除鼠标移动事件
            clearTimeout(speedTimer);window.onmousemove = null;//判断如果发生移动if (isMove) {//添加过渡属性
                xBox.style.transition = 'all 0.5s ease-out';zBox.style.transition = 'all 0.5s ease-out';//根据速度计算目标角度，设置到页面上
                zDegDistance = zDegDistance - (speedX * 10);zBox.style.transform = 'rotatez(' + zDegDistance + 'deg)';xDegDistance = xDegDistance - (speedY * 10);xDegDistance = xDegDistance > 179 ? 179 : xDegDistance < 1 ? 1 : xDegDistance;xBox.style.transform = 'translate(-50%,-50%) rotatex(' + xDegDistance + 'deg)';//记录当前角度的值更新
                xDegNow = xDegDistance;zDegNow = zDegDistance;//用到的变量重置
                isMove = false;speedX = 0;speedY = 0;xDegDistance = 0;zDegDistance = 0;}};}//鼠标拖拽文件function drop() {//取消鼠标拖拽文件进入窗口的默认行为
        window.ondragover = function (e) {e.preventDefault();}window.ondrop = function (e) {e.preventDefault();}//添加拖拽到p标签的事件var ps = document.getElementsByTagName('p');for (var i = 0; i < ps.length; i++) {ps[i].index = i;ps[i].ondrop = function (e) {var w = new FileReader();w.index = this.index;w.readAsDataURL(e.dataTransfer.files[0]);w.onload = function () {ps[this.index].style.backgroundImage = 'url(' + w.result + ')';ps[this.index].innerHTML = '';}}}}
</script>
</body>
</html>

如有错误，请联系我改正，非常感谢！！！

转载于:https://www.cnblogs.com/yidaixiaohui/p/8447015.html

使用html+css+js实现3D相册相关推荐

html js相册样式,使用html+css+js实现3D相册
Title html, body { margin: 0; padding: 0; background-color: #29454d; /*禁止文字被选中*/ -moz-user-select: n ...
解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果一.前言最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
超炫html+css+javascript幻化3D相册 (含背景音乐)程序员表白必备 _520_七夕情人节
❉ 超炫html+css+javascript幻化3D相册 (含背景音乐)程序员表白必备 _520_七夕情人节一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或 ...
HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️
效果演示: 文末获取源码代码目录: 主要代码实现: HTML代码 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
HTML+CSS+JS制作3D动态相册表白网站代码【程序员专属情人节表白网站】
❤ 精彩专栏推荐
HTML+CSS+JS实现 ❤️3D网状球体动画特效❤️
效果演示: 代码目录: 主要代码实现: CSS样式: @property --color-position {syntax: '<length-percentage>';inherits: ...
HTML+CSS+JS实现 ❤️3D奥运五环图形特效❤️
效果演示: 代码目录: 主要代码实现: CSS样式: /*** debug in progress ***/:root {--metal: #ffffff45;--gold: repeating-co ...
HTML+CSS+JS实现 ❤️3D悬浮粒子翻转动效❤️
效果演示: three基于canvas制作全屏的3D方块粒子悬停,跟随鼠标移动3D翻转动画特效.支持360度无死角翻转效果. 代码目录: 主要代码实现: html代码 : <!DOCTYPE h ...
HTML+CSS+JS实现 ❤️3D方块弹跳动画特效❤️
效果演示: 代码目录: 主要代码实现: 部分CSS样式: *, *::before, *::after {padding: 0;margin: 0 auto;box-sizing: border-bo ...

使用html+css+js实现3D相册

使用html+css+js实现3D相册相关推荐

最新文章

热门文章