原生JS3D拖拽相册

原生JS3d拖拽相册

效果展示

在这里插入图片描述
通过鼠标拖拽可以旋转展示图片

主要逻辑

  1. 实现整体的3D效果主要使用两条属性:preserve-3d,3D效果, perspective,场景景深
  2. 做到拖拽特效分为三个步骤,鼠标按下事件,鼠标移动事件,鼠标抬起事件
  3. 从开始拖拽到结束拖拽,还要获得鼠标位于页面所在的开始坐标和结束坐标,再将拖拽过程中的坐标更新就完成了项目整体逻辑

代码详解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生JS3D拖拽相册复刻1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: #000;
            overflow: hidden;
        }
        #perspective {
            perspective: 800px;
        }
        #wrap {
            width: 120px;
            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: 1px;

            transform: rotateY(0deg) translateZ(0px);
            /* 倒影:朝向 偏移 遮盖 */
            /* 线性渐变(开始位置,开始颜色,结束颜色) */
            -webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(0,0,0,0) 40%, 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="img/1.png" alt="">
            <img src="img/2.png" alt="">
            <img src="img/3.png" alt="">
            <img src="img/4.png" alt="">
            <img src="img/5.png" alt="">
            <img src="img/6.png" alt="">
            <img src="img/1.png" alt="">
            <img src="img/2.png" alt="">
            <img src="img/3.png" alt="">
            <img src="img/4.png" alt="">
            <img src="img/5.png" alt="">

            <p></p>

        </div>
    </div>
</body>
<script>
    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(let 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;
                roX -= minusY * 0.1;

                oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';

                //生成div,让div跟着鼠标动
                //前一点坐标
                lastX = nowX;
                lastY = nowY;
            }

            //抬起
            this.onmouseup = function() {
                this.onmousemove = null;
                timer = setInterval(function() {
                    minusX *= 0.95;
                    minusY *= 0.95;
                    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);
                    }
                },13);
            }
            return false;
        }
    }
</script>
</html>
已标记关键词 清除标记
相关推荐
<p> <strong><span style="background-color:#FFFFFF;color:#E53333;font-size:24px;">本页面购买不发书!!!仅为视频课购买!!!</span></strong> </p> <p> <strong><span style="color:#E53333;font-size:18px;">请务必到</span></strong><a href="https://edu.csdn.net/bundled/detail/49?utm_source=banner"><strong><span style="color:#E53333;font-size:18px;">https://edu.csdn.net/bundled/detail/49</span></strong></a><strong><span style="color:#E53333;font-size:18px;">下单购买课+书。</span></strong> </p> <p> <span style="font-size:14px;">本页面,仅为观看视频页面,如需一并购买图书,请</span><span style="font-size:14px;">务必到</span><a href="https://edu.csdn.net/bundled/detail/49?utm_source=banner"><span style="font-size:14px;">https://edu.csdn.net/bundled/detail/49</span></a><span style="font-size:14px;">下单购买课程+图书!!!</span> </p> <p> <br /> </p> <p> <span style="font-size:14px;">疯狂Python精讲课程覆盖《疯狂Python讲义》全书的主体内容。</span> </p> <span style="font-size:14px;">内容包括Python基本数据类型、Python列表、元组和字典、流程控制、函数式编程、面向对象编程、文件读写、异常控制、数据库编程、并发编程与网络编程、数据可视化分析、Python爬虫等。</span><br /> <span style="font-size:14px;"> 全套课程从Python基础开始介绍,逐步步入当前就业热点。将会带着大家从Python基础语法开始学习,为每个知识点都提供对应的代码实操、代码练习,逐步过渡到文件IO、数据库编程、并发编程、网络编程、数据分 析和网络爬虫等内容,本课程会从小案例起,至爬虫、数据分析案例终、以Python知识体系作为内在逻辑,以Python案例作为学习方式,最终达到“知行合一”。</span><br />
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页