js 实现拖拽旋转相册

最新推荐文章于 2024-08-27 17:15:42 发布

清酒独酌

最新推荐文章于 2024-08-27 17:15:42 发布

阅读量1.6k

点赞数

分类专栏： javascript 文章标签： javascript css css3 html 前端

本文链接：https://blog.csdn.net/yang68668/article/details/121968274

版权

javascript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

这个博客展示了如何使用HTML和CSS实现3D图片旋转效果，并通过JavaScript实现鼠标拖动来改变视角的交互。文章包含代码示例，详细解释了关键样式属性如`perspective`、`transform-style`和`transform`，以及如何添加过渡效果和鼠标事件监听来调整图片的旋转角度。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<!--设置图片的拖拽事件 不可用-->
<html lang="en" ondragstart="return false">

<head>
    <meta charset="UTF-8">
    <title>3D效果</title>
    <style>
        body {
            background-color: #000;
        }
        
        .container {
            /* perspective 属性定义 3D 元素距视图的距离，以像素计 */
            perspective: 800px;
            overflow: hidden;
        }
        
        .box {
            position: relative;
            width: 133px;
            height: 200px;
            margin: 300px auto;
            /*搭建3D效果必须的两个属性：一个变换风格变3d，一个场景景深800px*/
            transform-style: preserve-3d;
            transform: rotateX(-20deg) rotateY(0deg);
        }
        
        img {
            position: absolute;
            /*设置图片倒影效果*/
            /*倒影：朝向 偏移 遮盖*/
            /*线性渐变(从哪里开始,开始时候的颜色,结束时候的颜色)*/
            -webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(40%, transparent), to(rgba(250, 250, 250, 0.4)));
            box-shadow: 0 0 8px #f9f;
        }
        
        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 class="container">
        <div class="box">
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/4.jpg" alt="">
            <img src="img/5.jpg" alt="">
            <img src="img/6.jpg" alt="">
            <img src="img/7.jpg" alt="">
            <img src="img/8.jpg" alt="">
            <img src="img/9.jpg" alt="">
            <img src="img/10.jpg" alt="">
            <img src="img/11.jpg" alt="">
            <p></p>
        </div>
    </div>

    <script>
        // a 获取所有 img 元素
        var mimg = document.querySelectorAll("img");
        var mlength = mimg.length;
        // 动态获取 图片的旋转角度
        var mdeg = 360 / mlength;

        //获取box 容器
        var mbox = document.querySelector(".box");

        /*页面加载后执行  效果*/
        window.onload = function() {
            // 1 图片旋转动画
            for (var i = 0; i < mlength; i++) {
                // console.log(mimg);
                //每张图片 1 60 2 120 3 180 4 240  60为图片的平分角
                mimg[i].style.transform = "rotateY(" + (mdeg * i) + "deg) translateZ(350px)";
                // 添加过渡效果  动画执行多长时间 多久后开始执行动画 此时的效果 从最后一张开始动画
                //  console.log(mlength-i);
                mimg[i].style.transition = "1s " + (mlength - i) * 0.1 + "s"; //  0.1 动画调节
                //从第一张开始动画
                // mimg[i].style.transition = "1s "+i+"s";
            }

            // 获取鼠标点的位置 获取 差值 改变 转换的rotate： x y
            var newX, newY, lastX, lastY, cvalueX, cvalueY, rotX = -20,
                rotY = 0;
            // 鼠标滑动后改变效果 (使用鼠标 按下 替换点击事件)
            document.onmousedown = function(e) {
                // 鼠标点击
                //  console.log("点击");
                lastX = e.clientX;
                lastY = e.clientY;
                // 鼠标移动
                this.onmousemove = function(e) {
                        // console.log("移动");
                        newX = e.clientX;
                        newY = e.clientY;
                        console.log(newX + " " + newY);

                        //获取移动的差值
                        cvalueX = newX - lastX;
                        cvalueY = newY - lastY;

                        //获取旋转的角度
                        rotX -= cvalueY; /*因为要向前运动所以是负值*/
                        rotY += cvalueX;

                        // 将角度添加上 img容器
                        mbox.style.transform = "rotateX(" + rotX * 0.1 + "deg) rotateY(" + rotY * 0.1 + "deg)"
                            // 差值太大（转动太快） 调节每次的差值是和上一次差 而不是之前差（初始值的差）
                        lastX = newX;
                        lastY = newY;

                    }
                    // 鼠标抬起
                this.onmouseup = function() {
                    // console.log("抬起");
                    // 要停止移动的方法
                    this.onmousemove = null;
                }
            }
        }
    </script>
</body>

</html>