js+css实现三维图片层叠堆积鼠标跟随模糊聚焦效果代码-html代码-BFW代码库

代码语言：html

代码描述：js+css实现一组图片三维层叠堆积鼠标跟随模糊聚焦效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">


    <style>
        body {
          background: hsl(213, 8%, 40%);
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          height: 100vh;
          margin: 0;
        }
        
        .container {
          display: flex;
          flex-direction: row;
          transition: all .5s ease;
          perspective: 200px;
          height: 100vh;
        }
        
        .card-common {
          align-self: center;
          cursor: pointer;
          box-shadow: -10px 0 30px -10px hsla(0, 0%, 0%, 0.45);
          transition: all .15s linear;
          transform: rotateY(5deg);
        }
        
        /* clicked elements in dof-container dodge left to fully reveal themselves */
        .reveal:active {
          padding-right: 6em;
          transform: rotateZ(0deg);
          box-shadow: none;
        }
        
        /* Blur Controls */
        
        .blur-container{
          display: flex;
          flex-direction: column;
          position: fixed;
          top: 1em;
          right: 1em;
          box-shadow: 0 0 20px 0 hsla(0, 0%, 0%, 0.66);
          z-index: 2;
        }
        
        .controls-header {
          color: white;
          font-size: 15px;
          background: hsl(2, 49%, 56%);
          padding: 5px;
          margin: 0;
        }
        
        .controls {
          display: flex;
          flex-direction: row;
          height: 40px;
        }
        
        .control-button {
          width: 50px;
          font-size: 30px;
          line-height: 40px;
          background: hsl(216, 14%, 24%);
          border: none;
          cursor: pointer;
          color: white;
          margin: 0;
          padding: 0;
        }
        
        .blur-button:hover {
          background: hsl(216, 14%, 44%);
        }
        
        .indicator {
          background: hsl(219, 15%, 15%);
          width: 80px;
          color: white;
          font-size: 20px;
          text-align: center;
          line-height: 40px;
        }
        
        /* Card controller */
        
        .quantity-container {
          display: flex;
          flex-direction: column;
          position: fixed;
          top: 1em;
          left: 1em;
          box-shadow: 0 0 20px 0 hsla(0, 0%, 0%, 0.66);
          z-index: 2;
        }
    </style>
</head>

<body>
    <div class="quantity-container">
        <p class="controls-header">数量</p>
        <div class="controls">
            <button class="control-button" onClick="decreaseQuantity();">-</button>
            <div id="quantity-level" class="indicator"></div>
            <button class="control-button" onClick="increaseQuantity();">+</button>
        </div>
    </div>
    <div class="blur-container">
        <p class="controls-header">模糊度</p>
        <div class="controls">
            <button class="control-button" onClick="decreaseDepth();">-</button>
            <div id="blur-level" class="indicator"></div>
            <button class="control-button" onClick="increaseDepth();">+</button>
        </div>
    </div>
    <div id="dof-container" class="container">
        <img src="//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90" class="card-common" />
        <img src="//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90" class="card-common" />
        <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90" class="card-common" />
        <img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90" class="card-common" />
        <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90" class="card-common" />
        <img src="//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_500,/quality,q_90" class="card-common" />
    </div>

    <script>
        // global variables
        let currentDepth;
        let targetElement;
        let manualBlur;
        let elementQuantity;
        
        // Initialize
        setTimeout(function() {
          setPerspective();
          setInteractiveElements();
          generateRandomIndex();
        }, 0);
        
        // Applies heights and margins to all elements in dof-container in increasing increments
        function setPerspective() {
          let element = document.getElementById("dof-container"); // target container
          let nodes = element.getElementsByClassName('card-common').length; // target elements in container
          let value = document.getElementById(`quantity-level`);
          let finalWidth;
          let finalMargin;
          let initialWidth
          let marginModifier = 1.4;
          let widthModifier;
          let count = 0;
        
          // set quantity controller
          elementQuantity = nodes;
          value.innerHTML = nodes;
        
          if (nodes < 7) {
            initialWidth = 100;
            widthModifier = 23;
          }
          if (nodes > 6 && nodes < 13) {
            initialWidth = 80;
            widthModifier = 16;
          }
          if (nodes > 12 && nodes < 18) {
            initialWidth = 60;
            widthModifier = 10;
          }
          if (nodes > 17 && nodes < 21) {
            initialWidth = 30;
            widthModifier = 10;
          }
        
          for (let i = 0; i < nodes; i++) {
            count++;
            finalWidth = widthModifier * count + initialWidth;
            finalMargin = finalWidth / marginModifier;
            let z = element.getElementsByClassName('card-common')[i];
            z.style.width = `${finalWidth}px`;
            z.style.margin = `0 -${finalMargin}px 0 0`;
          }
        }
        
        function setInteractiveElements() {
          let element = document.getElementById("dof-container"); // target container
          let nodes = element.getElementsByClassName('card-common'); // target elements in container
        
          // Adds 'reveal' class to all elements in dof-container except last element
          // as there is no need for the last element to dodge left to reveal itself
          for (let i = 0; i < (nodes.length - 1); i++) {
            let z = nodes[i];
            classAttribute = z.getAttribute("class");
            console.log(`class = ${classAttribute}`)
        
            // Check if element already has the class attribute value of "reveal"
            if (classAttribute.includes("reveal")) {
            } else {
              z.className += " reveal";
            }
          }
        
          // Adds and sets onmouseover attribute to all elements in dof-container
          for (let i = 0; i < nodes.length; i++) {
            let z = nodes[i];
            let attribute = document.createAttribute("onmouseover");
            attribute.value = "getChildNodeIndex(this);";
            z.setAttributeNode(attribute);
          }
        }
        
        // Picks a random number from 0 to the number of nodes in the container.
        // This value is used to set an initial random 'focus' point on page load
        function generateRandomIndex() {
          let element = document.getElementById("dof-container"); // target container
          let nodes = element.getElementsByClassName('card-common').length; // target elements in container
          let randomIndex = Math.floor(Math.random() * (0 - nodes) +.........完整代码请登录后点击上方下载按钮下载查看