HTML5+CSS3+JS课程设计3D旋转照片墙背景音乐

扎心小指针0

已于 2022-11-18 10:58:57 修改

阅读量737

点赞数 2

分类专栏：前端开发文章标签： css3 javascript html5

于 2022-08-05 22:46:56 首次发布

本文链接：https://blog.csdn.net/weixin_63381305/article/details/126186920

版权

前端开发专栏收录该内容

18 篇文章 4 订阅

订阅专栏

完整代码：

<!DOCTYPE html>
<html lang="en" ondragstart="return false">
 
<head>
      <meta charset="UTF-8">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>3D旋转照片墙</title>
      <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js "></script>
      <!-- 如果我有天醒来 -->
      <!-- 层叠样式表 -->
      <style type="text/css">
            /* 去掉默认效果 */
            * {
                  margin: 0;
                  padding: 0;
            }
 
            body {
                  background: #222;
                  overflow: hidden;
                  /* 取消选中 */
                  user-select: none;
 
            }
 
            @keyframes rotate {
                  100% {
                        transform: rotateY(360deg);
                  }
            }
 
            .perspective {
                  /*子元素透视 场景深度*/
                  perspective: 600px;
            }
 
            .wrap {
                  /* 3d */
                  width: 135px;
                  height: 240px;
                  margin: 100px auto;
                  position: relative;
                  /* border: 1px solid red; */
                  transform: rotateX(-20deg) rotateY(0deg);
                  transform-style: preserve-3d;
 
            }
 
            .wrap img {
                  display: block;
                  /* 绝对定位 */
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  transform: rotateY(0deg) translateZ(0px);
                  background: transparent;
                  box-shadow: 0 0 4px #fff;
                  border-radius: 5px;
 
                  /* webkit */
            }
 
            /* 照片底座 */
            .wrap p {
                  width: 1200px;
                  height: 1200px;
                  background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, .5), rgba(0, 0, 0, 0));
                  position: absolute;
                  border-radius: 50%;
                  left: 50%;
                  top: 100%;
                  margin-left: -600px;
                  margin-top: -600px;
                  /* 沿着x轴按倒 */
                  transform: rotateX(90deg);
 
            }
      </style>
</head>
 
<body>
      <!-- 盒子容器 -->
      <div>
        <p class="open_music_div" style="display: none"><a href="javascript:void(0)" onclick="openmusic()"
                class="f85">开启音乐 </a></p>
        <p class="close_music_div"><a href="javascript:void(0)" onclick="pauseAuto()" class="f85">关闭音乐
            </a></p>
        <audio style="display:none; height: 0" id="bg-music" preload="auto"
            src="https://sucai.suoluomei.cn/sucai_zs/video/20191106172238-xiaoguojiang.mp3" loop="loop"></audio>
    </div>
      <div class="perspective">
            <div class="wrap" id="imgwrap">
                  <!-- 引入图片值页面 -->
                  <img class="f1" src="img/12.jpg" />
                  <img class="f1" src="img/13.jpg" />
                  <img class="f1" src="img/14.jpg" />
                  <img class="f1" src="img/15.jpg" />
                  <img class="f1" src="img/16.jpg" />
                  <img class="f1" src="img/1.jpg" />
                  <img class="f1" src="img/2.jpg" />
                  <img class="f1" src="img/3.jpg" />
                  <img class="f1" src="img/4.jpg" />
                  <img class="f1" src="img/5.jpg" />
                  <img class="f1" src="img/6.jpg" />
                  <img class="f1" src="img/7.jpg" />
                  <img class="f1" src="img/5.jpg" />
                  <img class="f1" src="img/6.jpg" />
                  <img class="f1" src="img/7.jpg" />
                  <img class="f1" src="img/8.jpg" />
                  <img class="f1" src="img/9.jpg" />
                  <img class="f1" src="img/10.jpg" />
                  <img class="f1" src="img/11.jpg" />
 
                  <img class="f1" src="img/17.jpg" />
                  <img class="f1" src="img/18.jpg" />
                  <img class="f1" src="img/19.jpg" />
                  <img class="f1" src="img/20.jpg" />
                  <img class="f1" src="img/21.jpg" />
                  <img class="f1" src="img/22.jpg" />
                  <img class="f1" src="img/23.jpg" />
                  <img class="f1" src="img/24.jpg" />
                  <img class="f1" src="img/25.jpg" />
                  <img class="f1" src="img/26.jpg" />
                  <img class="f1" src="img/27.jpg" />
                  <img class="f1" src="img/28.jpg" />
                  <img class="f1" src="img/29.jpg" />
                  <img class="f1" src="img/30.jpg" />
 
                  <!-- 引入图片值页面 -->
                  <img class="f2" src="img/1.jpg" />
                  <img class="f2" src="img/2.jpg" />
                  <img class="f2" src="img/3.jpg" />
                  <img class="f2" src="img/4.jpg" />
                  <img class="f2" src="img/5.jpg" />
 
                  <img class="f2" src="img/9.jpg" />
                  <img class="f2" src="img/10.jpg" />
                  <img class="f2" src="img/11.jpg" />
                  <img class="f2" src="img/12.jpg" />
                  <img class="f2" src="img/25.jpg" />
                  <img class="f2" src="img/26.jpg" />
                  <img class="f2" src="img/27.jpg" />
                  <img class="f2" src="img/28.jpg" />
                  <img class="f2" src="img/29.jpg" />
                  <img class="f2" src="img/30.jpg" />
                  <img class="f2" src="img/13.jpg" />
                  <img class="f2" src="img/14.jpg" />
                  <img class="f2" src="img/15.jpg" />
                  <img class="f2" src="img/16.jpg" />
                  <img class="f2" src="img/17.jpg" />
                  <img class="f2" src="img/18.jpg" />
                  <img class="f2" src="img/19.jpg" />
                  <img class="f2" src="img/20.jpg" />
                  <img class="f2" src="img/21.jpg" />
                  <img class="f2" src="img/22.jpg" />
                  <img class="f2" src="img/23.jpg" />
                  <img class="f2" src="img/24.jpg" />
                  <img class="f2" src="img/6.jpg" />
                  <img class="f2" src="img/7.jpg" />
                  <img class="f2" src="img/5.jpg" />
                  <img class="f2" src="img/6.jpg" />
                  <img class="f2" src="img/7.jpg" />
                  <img class="f2" src="img/8.jpg" />
                  <!-- 引入图片值页面 -->
 
                  <img class="f3" src="img/1.jpg" />
                  <img class="f3" src="img/2.jpg" />
                  <img class="f3" src="img/11.jpg" />
                  <img class="f3" src="img/12.jpg" />
                  <img class="f3" src="img/25.jpg" />
                  <img class="f3" src="img/26.jpg" />
                  <img class="f3" src="img/27.jpg" />
                  <img class="f3" src="img/3.jpg" />
                  <img class="f3" src="img/4.jpg" />
                  <img class="f3" src="img/5.jpg" />
 
 
                  <img class="f3" src="img/16.jpg" />
                  <img class="f3" src="img/17.jpg" />
                  <img class="f3" src="img/18.jpg" />
                  <img class="f3" src="img/10.jpg" />
 
                  <img class="f3" src="img/28.jpg" />
                  <img class="f3" src="img/29.jpg" />
                  <img class="f3" src="img/30.jpg" />
                  <img class="f3" src="img/13.jpg" />
 
                  <img class="f3" src="img/19.jpg" />
                  <img class="f3" src="img/20.jpg" />
                  <img class="f3" src="img/21.jpg" />
                  <img class="f3" src="img/22.jpg" />
                  <img class="f3" src="img/23.jpg" />
                  <img class="f3" src="img/24.jpg" />
                  <img class="f3" src="img/9.jpg" />
                  <img class="f3" src="img/14.jpg" />
                  <img class="f3" src="img/15.jpg" />
                  <img class="f3" src="img/6.jpg" />
                  <img class="f3" src="img/7.jpg" />
                  <img class="f3" src="img/5.jpg" />
                  <img class="f3" src="img/6.jpg" />
                  <img class="f3" src="img/7.jpg" />
                  <img class="f3" src="img/8.jpg" />
 
 
                  <p></p>
            </div>
      </div>
      <!--  src="JS/photo.js" -->
      <script type="text/javascript">
            var oImg = document.getElementsByClassName('f1')
            var oImg2 = document.getElementsByClassName('f2')
            var oImg3 = document.getElementsByClassName('f3')
            var len = oImg.length;
            console.log(len)
            var deg = 360 / len;
 
            var oWrap = document.getElementById("imgwrap");
            // var oWrap=document.querySelector('.wrap');
 
            //页面加载完毕在执行的代码
            window.onload = function () {
                  Array.prototype.forEach.call(oImg, function (ele, index, self) {
                        // 旋转并沿Z轴平移
                        ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px)";
                        //过渡时间1s
                        ele.style.transition = "4s " + (len - index) * 4+ "s";
 
                  });
                  Array.prototype.forEach.call(oImg2, function (ele, index, self) {
                        // 旋转并沿Z轴平移
                        ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(240px)";
                        //过渡时间1s
                        ele.style.transition = "6s " + (len - index) *5 + "s";
 
                  });
                  Array.prototype.forEach.call(oImg3, function (ele, index, self) {
                        // 旋转并沿Z轴平移
                        ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(480px)";
                        //过渡时间1s
                        ele.style.transition = "7s " + (len - index) *6+ "s";
 
                  });
                  // Array.prototype.forEach.call(oImg, function (ele, index, self) {
                  //       // 旋转并沿Z轴平移
                  //       ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(350px)";
                  //       //过渡时间1s
                  //       ele.style.transition = "1s " + (len - index) * 0.1 + "s";
 
                  // });
 
            }
            //翻动3D相册
            var newX, newY, lastX, lastY, minusX, minusY, rotX = -20, rotY = 0;
 
            document.onmousedown = function (e) {
                  // 点击设置初值
                  lastX = e.clientX;
                  lastY = e.clientY;
 
                  this.onmousemove = function (e) {
                        newX = e.clientX;
                        newY = e.clientY;
                        minusX = newX - lastX;
                        minusY = newY - lastY;
 
                        rotX -= minusY * 0.2;
                        rotY += minusX * 0.1;
                        oWrap.style.transform = "rotateX(" + rotX + "deg) rotateY(" + rotY + "deg)";
                        lastX = newX;
                        lastY = newY;
 
                  }
                  this.onmouseup = function (e) {
                        //鼠标松开
                        this.onmousemove = null;//清除鼠标移动
                  }
            }
 
      </script>
</body>
<script type="text/javascript">
            $(document).ready(function () {
        autoPlayMusic();
        audioAutoPlay();
    });


    // 开启音乐
    function openmusic() {
        autoPlayMusic();
        audioAutoPlay();
        $(".close_music_div").css({
            "display": "block"
        });
        $(".open_music_div").css({
            "display": "none"
        });
    }

    // 关闭音乐
    function pauseAuto() {
        var audio = document.getElementById('bg-music');
        audio.pause();
        $(".close_music_div").css({
            "display": "none"
        });
        $(".open_music_div").css({
            "display": "block"
        });
    }

    function audioAutoPlay() {
        var audio = document.getElementById('bg-music');
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    // 音乐播放
    function autoPlayMusic() {
        // 自动播放音乐效果，解决浏览器或者APP自动播放问题
        function musicInBrowserHandler() {
            musicPlay(true);
            document.body.removeEventListener('touchstart', musicInBrowserHandler);
        }
        document.body.addEventListener('touchstart', musicInBrowserHandler);
        // 自动播放音乐效果，解决微信自动播放问题
        function musicInWeixinHandler() {
            musicPlay(true);
            document.addEventListener("WeixinJSBridgeReady", function () {
                musicPlay(true);
            }, false);
            document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
        }
        document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
    }

    function musicPlay(isPlay) {
        var media = document.querySelector('#bg-music');
        if (isPlay && media.paused) {
            media.play();
        }
        if (!isPlay && !media.paused) {
            media.pause();
        }
    }</script>
 
</html>

播放音乐：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js "></script>
</head>

<body>
    <div>
        <p class="open_music_div" style="display: none"><a href="javascript:void(0)" onclick="openmusic()"
                class="f85">开启音乐 </a></p>
        <p class="close_music_div"><a href="javascript:void(0)" onclick="pauseAuto()" class="f85">关闭音乐
            </a></p>
        <audio style="display:none; height: 0" id="bg-music" preload="auto"
            src="https://sucai.suoluomei.cn/sucai_zs/video/20191106172238-xiaoguojiang.mp3" loop="loop"></audio>
    </div>
</body>
<script>
    // 存在问题：在微信上可以自动播放，但在chrome浏览器上不能自动播放
    // 原因是Chrome 66为了避免标签产生随机噪音禁止没有交互前使用js进行播放
    
    //音乐自动播放
    $(document).ready(function () {
        autoPlayMusic();
        audioAutoPlay();
    });


    // 开启音乐
    function openmusic() {
        autoPlayMusic();
        audioAutoPlay();
        $(".close_music_div").css({
            "display": "block"
        });
        $(".open_music_div").css({
            "display": "none"
        });
    }

    // 关闭音乐
    function pauseAuto() {
        var audio = document.getElementById('bg-music');
        audio.pause();
        $(".close_music_div").css({
            "display": "none"
        });
        $(".open_music_div").css({
            "display": "block"
        });
    }

    function audioAutoPlay() {
        var audio = document.getElementById('bg-music');
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    // 音乐播放
    function autoPlayMusic() {
        // 自动播放音乐效果，解决浏览器或者APP自动播放问题
        function musicInBrowserHandler() {
            musicPlay(true);
            document.body.removeEventListener('touchstart', musicInBrowserHandler);
        }
        document.body.addEventListener('touchstart', musicInBrowserHandler);
        // 自动播放音乐效果，解决微信自动播放问题
        function musicInWeixinHandler() {
            musicPlay(true);
            document.addEventListener("WeixinJSBridgeReady", function () {
                musicPlay(true);
            }, false);
            document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
        }
        document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
    }

    function musicPlay(isPlay) {
        var media = document.querySelector('#bg-music');
        if (isPlay && media.paused) {
            media.play();
        }
        if (!isPlay && !media.paused) {
            media.pause();
        }
    }
</script>

</html>