javascript—每次加载新页面时，自定义光标都会重置到页面的左上角

fnvucqvd 于 2021-09-13 发布在 Java

关注(0)|答案(2)|浏览(257)

我有一个自定义光标在我的网站上，是完美的工作，除了一件事。当点击到一个新页面时，当页面加载时，光标将自身重置到页面的左上角，而不管您将鼠标放在页面上的什么位置，然后移动鼠标后，光标将移回鼠标所在的位置。我已经尝试从css中删除“top”和“left”，但问题仍然存在。我看不出是什么导致了这种情况，我只需要光标停留在鼠标在页面上的位置，而不是每次导航到新页面时都重置。

jQuery(document).ready(function($) {
let cursor = document.querySelector('#custom-cursor');

    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
    $('#custom-cursor').remove();
}
else { cursor.style.display = 'block';}

document.addEventListener('mousemove', evt => {

  let { clientX: x, clientY: y } = evt;
  let scale = 1;

  if (evt.target.matches('a,span,[onclick],img,video,i')) {
    cursor.classList.add('active');
    scale = 0.5;
  } else {
    cursor.classList.remove('active');
  }

  cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;

});
});


* {

  cursor: none;
}

# custom-cursor {

  display: none;
  position: fixed;
  width: 20px; height: 20px;
  top: -10px;
  left: -10px;
  border: 2px solid black;
  border-radius: 50%;
  opacity: 1;
  background-color: #fb4d98;
  pointer-events: none;
  z-index: 99999999;
  transition:
    transform ease-out 0.15s,
    border 0.5s,
    opacity 0.5s,
    background-color 0.5s;
}

# custom-cursor.active {

  opacity: 0.5;
  background-color: #000;
  border: 2px solid #fb4d98;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>

jquery JavaScript Html css

来源：https://stackoverflow.com/questions/68531338/custom-cursor-is-reset-to-top-left-of-page-every-time-a-new-page-is-loaded

2条答案

按热度按时间

ifsvaxew1#

如另一个答案所示，使用普通css光标，并在第一个鼠标事件中将其替换为您喜欢的光标：

jQuery(document).ready(function($) {
  let cursor = document.querySelector('#custom-cursor');

  document.addEventListener('mousemove', evt => {
    document.body.classList.add('custom-cursor-moved')

    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
      $('#custom-cursor').remove();
    } else {
      cursor.style.display = 'block';
    }

    let {
      clientX: x,
      clientY: y
    } = evt;
    let scale = 1;

    if (evt.target.matches('a,span,[onclick],img,video,i')) {
      cursor.classList.add('active');
      scale = 0.5;
    } else {
      cursor.classList.remove('active');
    }

    cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;

  });
});

body {
  height: 100vh;
}

html,
body {
  margin: 0;
  padding: 0;
}

* {

  cursor: url(https://i.stack.imgur.com/7pmmV.png) 0 0, auto;
}

.custom-cursor-moved,
.custom-cursor-moved * {
  cursor: none !important;
}

# custom-cursor {

  display: none;
  position: fixed;
  width: 20px;
  height: 20px;
  top: -10px;
  left: -10px;
  border: 2px solid black;
  border-radius: 50%;
  opacity: 1;
  background-color: #fb4d98;
  pointer-events: none;
  z-index: 99999999;
  transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s;
}

# custom-cursor.active {

  opacity: 0.5;
  background-color: #000;
  border: 2px solid #fb4d98;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>

Try me.<br> Try me.

它需要一些修改（更好的光标图像，修复热点等），但它可以工作。
做这种事时要非常非常小心。尽量不要破坏任何辅助工具，请不要假设android/某些特定的用户代理有触摸屏等。。使用适当的API。

赞(0）回复(0）举报 2021-09-13

ocebsuys2#

使用css cursor 改为：

html {
  cursor: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) 0 0, auto;
  height: 100%;
}

Try me.

赞(0）回复(0）举报 2021-09-13

我来回答

javascript—每次加载新页面时，自定义光标都会重置到页面的左上角

2条答案

相关问题

热门标签

最新问答