前端音乐相册

半梦️半醒

已于 2023-11-04 09:18:37 修改

阅读量118

点赞数

分类专栏：前端项目文章标签：前端

于 2023-11-04 09:18:00 首次发布

本文链接：https://blog.youkuaiyun.com/m0_74476346/article/details/134214441

版权

前端项目专栏收录该内容

2 篇文章

订阅专栏

本文将介绍如何利用前端技术构建一个集音乐播放与图片展示于一体的相册应用。通过结合HTML、CSS和JavaScript，实现音乐播放功能和动态展示图片的效果，为用户带来视听结合的浏览体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3+3D相册</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
    margin:100;
    padding:300;
    font-size:0;
}
html,body {
    width:100%;
    height:100%;
    display:flex;
    display:-webkit-flex;
    background:-webkit-radial-gradient(#490338 10%,#000);
    perspective:900px;
    overflow:hidden;
}
#album {
    width:133px;
    height:200px;
    margin:auto;
    position:relative;
    transform-style:preserve-3d;
    transform:rotateX(-20deg);
}
#album img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    /* 反射倒影 距离下面5px  */
            -webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));
}
#album p {
    position:absolute;
    left:calc(133px/2 - 800px/2);
    top:calc(200px/2 - 800px/2);
    width:800px;
    height:800px;
    background:rgba(255,255,255,0.1);
    transform:translateY(100px) rotateX(90deg);
    border-radius:50%;
}
      .img {
            width: 100px;
            height: 100px;
            animation: rotate 3s linear infinite;
            border-radius: 50%;
            -webkit-user-drag: none;
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
 50%{
                transform: rotate(180deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

</style>
</head>
<body>
    <audio src="mp3/jaycd - 梦中的婚礼 (钢琴版).mp3" autoplay controls ></audio>
<div id="album">
    <img src="img/demo01.jpg" alt="">
    <img src="img/demo02.jpg" alt="">
    <img src="img/demo03.jpg" alt="">
    <img src="img/demo04.jpg" alt="">
    <img src="img/demo05.jpg" alt="">
    <img src="img/demo06.jpg" alt="">
    <img src="img/demo07.jpg" alt="">
    <img src="img/demo001.jpg" alt="">
    <img src="img/demo002.jpg" alt="">
    <img src="img/demo003.jpg" alt="">
    <p></p>
</div>

<script>
/*旋转分散*/
window.onload = function() {
    var album = document.getElementById('album'),
        aImg = document.querySelectorAll('img');
    for (var i = 0; i < aImg.length; i++) {
        // 图片旋转分散 36°
        aImg[i].style.transform = 'rotateY(' + i * 360 / aImg.length + 'deg) translateZ(300px)';
        aImg[i].style.transition = 'transform 1s ' + (aImg.length - i) * 0.1 + 's';
    }
    var lastX = 0, // 前一次的坐标X
        lastY = 0,
        nowX = 0, // 当前的坐标X
        nowY = 0,
        desX = 0,
        desY = 0,
        rotX = -30,
        rotY = 0,
        timer; // 时间间隔
    document.onmousedown = function(e) {
        var e = e || event;
        lastX = e.clientX;
        lastY = e.clientY;
        this.onmousemove = function(e) {
            var e = e || event;
            nowX = e.clientX;
            nowY = e.clientY;
            desX = nowX - lastX;
            desY = nowY - lastY;
            // 更新album的旋转角度，拖拽越快-> des变化大 -> roY变化大 -> 旋转快
            rotX -= desY * 0.1;
            rotY += desX * 0.2;
            album.style.transform = 'rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg)';
            lastX = nowX;
            lastY = nowY;
        }
        document.onmouseup = function() {
            this.onmousemove = this.onmouseup = null;
            timer = setInterval(function() {
                desX *= 0.95;
                desY *= 0.95;
                rotX -= desY * 0.1;
                rotY += desX * 0.2;
                album.style.transform = 'rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg)';

                if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
                    clearInterval(timer);
                }
            }, 13)
        }
        // 阻止默认行为
        return false;
    }
}
</script>

</body>
</html>