jquery 如何在HTML和CSS中使两个滚动条共享对角线图中红色球的相同左侧位置？

jxct1oxe  于 2023-05-28  发布在  jQuery
关注(0)|答案(1)|浏览(190)

我有HTML和CSS的问题。我需要做一个图表，其中红球上下对角，它必须遵循蓝线的X位置（此元素只向左或向右移动）。问题是滚动条1和2共享红球的左侧位置。。因此，它结束了buggy和他们回到位置的百分比，他们各自的滚动条。我如何使他们两个共享相同的左边位置的红球？

  1. document.addEventListener("DOMContentLoaded", function () {
  3.     const scrollBar1 = document.getElementById("scroll-bar1");
  4.     const scrollBar2 = document.getElementById("scroll-bar2");
  5.     const scrollBar3 = document.getElementById("scroll-bar3");
  6.     const scrollBar4 = document.getElementById("scroll-bar4");
  7.     const scrollBar5 = document.getElementById("scroll-bar5");
  8.     const scrollBar6 = document.getElementById("scroll-bar6");
  9.   
  10.     const redBall = document.getElementById("red-ball");
  11.     const blueLine = document.getElementById("blue-line");
  13.     let leftBall
  15.     scrollBar1.addEventListener("input", function() {
  16.       // Verifica se o valor da scroll bar 1 foi alterado
  17.       if (scrollBar1.value !== scrollBar1.previousValue) {
  19.         const xPercentage = (scrollBar1.value - 100) / (200 - 100);
  20.       const xPosition = xPercentage * 100;
  21.       leftBall = xPosition
  22.       redBall.style.left = `${leftBall}%`;
  23.       
  24.   
  25.       // Atualiza a posição da bola vermelha na vertical (scroll bar 1)
  26.       const yPercentage = (scrollBar1.value - 100) / (200 - 100);
  27.       const yPosition = yPercentage * 100;
  28.       redBall.style.top = `${yPosition}%`;
  30.       console.log(redBall.style.left)
  32.       }
  33.     });
  35.     scrollBar2.addEventListener("input", function() {
  36.       // Verifica se o valor da scroll bar 1 foi alterado
  37.       if (scrollBar2.value !== scrollBar2.previousValue) {
  39.         const blueLinePercentage = (scrollBar2.value - 400) / (0 - 400);
  40.         const blueLinePosition = blueLinePercentage * 100;
  41.         //leftBall = blueLinePosition
  42.         blueLine.style.left = `${80 - blueLinePosition}%`;
  43.         redBall.style.left = `${100-blueLinePosition}%`;
  44.         console.log(redBall.style.left)
  45.       }
  46.     });
  47. });
  1. .container {
  2.   text-align: center;
  3. }
  5. #chart {
  6.   position: relative;
  7.   width: 450px;
  8.   height: 450px;
  9.   margin: 0 auto;
  10.   background-color: #f2f2f2;
  11.   border: 1px solid #ccc;
  12. }
  14. #red-ball {
  15.   position: absolute;
  16.   top: 50%;
  17.   left: 50%;
  18.   transform: translate(-50%, -50%);
  19.   width: 20px;
  20.   height: 20px;
  21.   background-color: red;
  22.   border-radius: 50%;
  23.   transform: rotate(45deg);
  24. }
  26. #black-line {
  27.   position: absolute;
  28.   top: 50%;
  29.   left: 30%;
  30.   transform: translateY(-50%, -50%);
  31.   width: 40%;
  32.   height: 2px;
  33.   background-color: black;
  34.   transform: rotate(45deg);
  35. }
  37. #blue-line {
  38.   position: absolute;
  39.   top: 50%;
  40.   left: 30%;
  41.   transform: translateY(-50%, -50%);
  42.   width: 40%;
  43.   height: 2px;
  44.   background-color: blue;
  45.   transform: rotate(45deg);
  46. }
  48. #x-axis {
  49.   position: absolute;
  50.   bottom: -20px;
  51.   left: 0;
  52.   width: 100%;
  53.   display: flex;
  54.   justify-content: space-between;
  55. }
  57. #y-axis {
  58.   position: absolute;
  59.   top: 0;
  60.   left: -30px;
  61.   height: 100%;
  62.   display: flex;
  63.   flex-direction: column;
  64.   justify-content: space-between;
  65. }
  67. .axis-label {
  68.   font-size: 12px;
  69. }
  71. .scroll-bar {
  72.   margin: 20px auto;
  73.   width: 400px;
  74.   display: flex;
  75.   align-items: center;
  76. }
  78. .scroll-bar input[type="range"] {
  79.   flex-grow: 1;
  80. }
  82. .scroll-bar-value {
  83.   margin-left: 10px;
  84.   font-size: 12px;
  85. }
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Gráfico de Demanda por Carne Moída</title>
  8.   <link rel="stylesheet" type="text/css" href="styles.css">
  9. </head>
  10. <body>
  11.   <div class="container">
  12.     <h1>Gráfico de Demanda por Carne Moída</h1>
  13.     <div id="chart">
  14.       <div id="red-ball"></div>
  15.       <div id="black-line"></div>
  16.       <div id="blue-line"></div>
  17.       <div id="x-axis">
  18.         <span class="axis-label">6,292</span>
  19.         <span class="axis-label">10,292</span>
  20.         <span class="axis-label">14,292</span>
  21.       </div>
  22.       <div id="y-axis">
  23.         <span class="axis-label">90</span>
  24.         <span class="axis-label">140</span>
  25.         <span class="axis-label">190</span>
  26.       </div>
  27.     </div>
  28.     <div class="scroll-bar">
  29.       <input type="range" id="scroll-bar1" min="100" max="200" value="150">
  30.       <span id="scroll-bar-value1" class="scroll-bar-value"></span>
  31.     </div>
  32.     <div class="scroll-bar">
  33.       <input type="range" id="scroll-bar2" min="0" max="400" value="200">
  34.       <span id="scroll-bar-value2" class="scroll-bar-value"></span>
  35.     </div>
  36.     <div class="scroll-bar">
  37.       <input type="range" id="scroll-bar3" min="100" max="300" value="200">
  38.       <span id="scroll-bar-value3" class="scroll-bar-value"></span>
  39.     </div>
  40.     <div class="scroll-bar">
  41.       <input type="range" id="scroll-bar4" min="100" max="400" value="180">
  42.       <span id="scroll-bar-value4" class="scroll-bar-value"></span>
  43.     </div>
  44.     <div class="scroll-bar">
  45.       <input type="range" id="scroll-bar5" min="10" max="200" value="30">
  46.       <span id="scroll-bar-value5" class="scroll-bar-value"></span>
  47.     </div>
  48.     <div class="scroll-bar">
  49.       <input type="range" id="scroll-bar6" min="0" max="200" value="100">
  50.       <span id="scroll-bar-value6" class="scroll-bar-value"></span>
  51.     </div>
  52.   </div>
  53.   <script src="script.js"></script>
  54. </body>
  55. </html>
jquery

1条答案

按热度按时间
gcxthw6b

gcxthw6b1#

在同一个回调函数中管理所有的变量，这让我更清楚地了解了这个问题。
这并不容易，但我想我做到了：

  1. document.addEventListener("DOMContentLoaded", function () {
  3.     const scrollBar1 = document.getElementById("scroll-bar1");
  4.     const scrollBar2 = document.getElementById("scroll-bar2");
  5.     const scrollBar3 = document.getElementById("scroll-bar3");
  6.     const scrollBar4 = document.getElementById("scroll-bar4");
  7.     const scrollBar5 = document.getElementById("scroll-bar5");
  8.     const scrollBar6 = document.getElementById("scroll-bar6");
  9.   
  10.     const redBall = document.getElementById("red-ball");
  11.     const blueLine = document.getElementById("blue-line");
  12.     
  13.     scrollBar1.addEventListener("input", updatePos);
  14.     scrollBar2.addEventListener("input", updatePos);
  15.     
  16.     function  updatePos(){
  17.         const xPercentage = (scrollBar1.value - 100) / (200 - 100);
  18.         const xPosition = xPercentage * 100;
  19.         
  20.         let leftBall = xPosition+20;
  21.         
  22.         // Atualiza a posição da bola vermelha na vertical (scroll bar 1)
  23.         const yPercentage = (scrollBar1.value - 100) / (200 - 100);
  24.         const yPosition = yPercentage * 100;
  25.       
  26.         const blueLinePercentage = (scrollBar2.value - 400) / (0 - 400);
  27.         const blueLinePosition = blueLinePercentage * 100;
  28.         
  29.         leftBall -= blueLinePosition-30;
  30.         
  31.         redBall.style.top = `${yPosition}%`;
  32.         redBall.style.left = `${leftBall}%`;
  33.         blueLine.style.left = `${80 - blueLinePosition}%`;
  34.     }
  35. });
  1. .container {
  2.   text-align: center;
  3. }
  5. #chart {
  6.   position: relative;
  7.   width: 450px;
  8.   height: 450px;
  9.   margin: 0 auto;
  10.   background-color: #f2f2f2;
  11.   border: 1px solid #ccc;
  12. }
  14. #red-ball {
  15.   position: absolute;
  16.   top: 50%;
  17.   left: 50%;
  18.   transform: translate(-50%, -50%);
  19.   width: 20px;
  20.   height: 20px;
  21.   background-color: red;
  22.   border-radius: 50%;
  23.   transform: rotate(45deg);
  24. }
  26. #black-line {
  27.   position: absolute;
  28.   top: 50%;
  29.   left: 30%;
  30.   transform: translateY(-50%, -50%);
  31.   width: 40%;
  32.   height: 2px;
  33.   background-color: black;
  34.   transform: rotate(45deg);
  35. }
  37. #blue-line {
  38.   position: absolute;
  39.   top: 50%;
  40.   left: 30%;
  41.   transform: translateY(-50%, -50%);
  42.   width: 40%;
  43.   height: 2px;
  44.   background-color: blue;
  45.   transform: rotate(45deg);
  46. }
  48. #x-axis {
  49.   position: absolute;
  50.   bottom: -20px;
  51.   left: 0;
  52.   width: 100%;
  53.   display: flex;
  54.   justify-content: space-between;
  55. }
  57. #y-axis {
  58.   position: absolute;
  59.   top: 0;
  60.   left: -30px;
  61.   height: 100%;
  62.   display: flex;
  63.   flex-direction: column;
  64.   justify-content: space-between;
  65. }
  67. .axis-label {
  68.   font-size: 12px;
  69. }
  71. .scroll-bar {
  72.   margin: 20px auto;
  73.   width: 400px;
  74.   display: flex;
  75.   align-items: center;
  76. }
  78. .scroll-bar input[type="range"] {
  79.   flex-grow: 1;
  80. }
  82. .scroll-bar-value {
  83.   margin-left: 10px;
  84.   font-size: 12px;
  85. }
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Gráfico de Demanda por Carne Moída</title>
  8.   <link rel="stylesheet" type="text/css" href="styles.css">
  9. </head>
  10. <body>
  11.   <div class="container">
  12.     <h1>Gráfico de Demanda por Carne Moída</h1>
  13.     <div id="chart">
  14.       <div id="red-ball"></div>
  15.       <div id="black-line"></div>
  16.       <div id="blue-line"></div>
  17.       <div id="x-axis">
  18.         <span class="axis-label">6,292</span>
  19.         <span class="axis-label">10,292</span>
  20.         <span class="axis-label">14,292</span>
  21.       </div>
  22.       <div id="y-axis">
  23.         <span class="axis-label">90</span>
  24.         <span class="axis-label">140</span>
  25.         <span class="axis-label">190</span>
  26.       </div>
  27.     </div>
  28.     <div class="scroll-bar">
  29.       <input type="range" id="scroll-bar1" min="100" max="200" value="150">
  30.       <span id="scroll-bar-value1" class="scroll-bar-value"></span>
  31.     </div>
  32.     <div class="scroll-bar">
  33.       <input type="range" id="scroll-bar2" min="0" max="400" value="200">
  34.       <span id="scroll-bar-value2" class="scroll-bar-value"></span>
  35.     </div>
  36.     <div class="scroll-bar">
  37.       <input type="range" id="scroll-bar3" min="100" max="300" value="200">
  38.       <span id="scroll-bar-value3" class="scroll-bar-value"></span>
  39.     </div>
  40.     <div class="scroll-bar">
  41.       <input type="range" id="scroll-bar4" min="100" max="400" value="180">
  42.       <span id="scroll-bar-value4" class="scroll-bar-value"></span>
  43.     </div>
  44.     <div class="scroll-bar">
  45.       <input type="range" id="scroll-bar5" min="10" max="200" value="30">
  46.       <span id="scroll-bar-value5" class="scroll-bar-value"></span>
  47.     </div>
  48.     <div class="scroll-bar">
  49.       <input type="range" id="scroll-bar6" min="0" max="200" value="100">
  50.       <span id="scroll-bar-value6" class="scroll-bar-value"></span>
  51.     </div>
  52.   </div>
  53.   <script src="script.js"></script>
  54. </body>
  55. </html>
展开查看全部
赞(0）分享  回复(0）举报  2023-05-28
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com