javascript 主页上的滑块不做它需要做的事情

sh7euo9m 于 5个月前发布在 Java

关注(0)|答案(1)|浏览(54)

我偶然发现了一个问题，我的滑块，我希望我的滑块出现在我的网站的右侧，当我悬停在那里，并消失时，我悬停在，例如，左侧。
现在滑块是功能，但它只消失时，悬停在，例如，我的浏览器标签或浏览器窗口。
有人知道如何实现这一点吗？

const sliderOverlay = document.querySelector('.slider-overlay');
const leftSide = document.getElementById('leftSide');
const mainPage = document.getElementById('mainPage');

mainPage.addEventListener('mousemove', (e) => {
  const mouseX = e.pageX;
  const leftSideBoundary = leftSide.getBoundingClientRect().right;

  if (mouseX >= leftSideBoundary) {
    // If mouse is on the right side of the leftSide element
    sliderOverlay.style.width = '20%'; // Or your desired width
    sliderOverlay.style.opacity = '1';
  } else {
    // If mouse is not over the leftSide element
    sliderOverlay.style.width = '0';
    sliderOverlay.style.opacity = '0';
  }
});

.slider-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* Adjust darkness here */
  z-index: 1;
  opacity: 0;
  transition: width 0.5s ease, opacity 0.5s ease;
}

#mainPage:hover .slider-overlay {
  width: 20%;
  /* Slide in from right to left */
  opacity: 1;
}

<div class="page hidden" id="mainPage">
  <!-- Main content -->
  <div class="main-content">
    <!-- Your main content goes here -->
    <h1>Welcome to the Main Page</h1>
    <p>This is the content of the main page.</p>
  </div>
  <!-- Slider overlay -->

  <div class="slider-overlay" id="sliderOverlay">
    <h2>Slider Content</h2>
  </div>

</div>

我试着和ChatGPT一起使用，但所有的答案都使它要么滑块完全消失，什么都没有改变，要么它确实出现了，但只是一闪而过。

JavaScript

来源：https://stackoverflow.com/questions/77745428/slider-on-mainpage-doesnt-do-what-it-needs-to

1条答案

按热度按时间

ekqde3dh1#

不知何故，你实际上在这里有某种冲突。你在某个时候检查鼠标位置来更改CSS属性值，同时也使用CSS：hover来更改CSS属性。我还注意到JavaScript代码中的一个问题：

const leftSide = document.getElementById('leftSide');

字符串
HTML上没有“leftSide”元素，则JavaScript代码执行失败。
然后，我提出一种简化：

我们正在检查鼠标的位置，以检查我们是否在网站的右侧或左侧
我们正在删除:hover行为
我们正在使用position right CSS属性而不是width（width的问题是，由于覆盖容器的宽度不断变化，覆盖内的元素在出现时会出现故障）

const sliderOverlay = document.querySelector('.slider-overlay');
const overlayWidth = sliderOverlay.getBoundingClientRect().width;

sliderOverlay.style.right = '-' + overlayWidth + 'px';

document.addEventListener('mousemove', (e) => {
    const mouseX = e.pageX;
    //const overlayWidth = sliderOverlay.getBoundingClientRect().width;
    const windowWidth = window.innerWidth;

    if (mouseX >= windowWidth - overlayWidth) {
        console.log('I am on right side of the website'); sliderOverlay.style.right = '0px'; // Or your desired width
        sliderOverlay.style.opacity = '1';
    } else {
        console.log('I am on left side of the website');
        sliderOverlay.style.right = '-' + overlayWidth + 'px';
        sliderOverlay.style.opacity = '0';
    }
});

.slider-overlay {
        position: absolute;
        top: 0;
        right: -500px;
        width: 500px;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        /* Adjust darkness here */
        z-index: 1;
        opacity: 0.5;
        transition: right 0.5s ease, opacity 0.5s ease;
    }

<div class="page hidden" id="mainPage">
    <!-- Main content -->
    <div class="main-content">
        <!-- Your main content goes here -->
        <h1>Welcome to the Main Page</h1>
        <p>This is the content of the main page.</p>
    </div>
    <!-- Slider overlay -->

    <div class="slider-overlay" id="sliderOverlay">
        <h2>Slider Content</h2>
    </div>

</div>

希望能帮上忙。

赞(0）回复(0）举报 5个月前

我来回答

javascript 主页上的滑块不做它需要做的事情

1条答案

相关问题

热门标签

最新问答