我使用 jquery 在游標后面畫了一個圓圈，效果很好，但我想知道是否有一種方法可以讓圓圈在滑鼠停止時消失。
我曾嘗試使用 jquery 的 mouseout 功能并使不透明度為 0，但只要滑鼠停止，它就會停止中間的圓圈，這很明顯，但還有其他方法可以實作這一點嗎？
我的jQuery代碼 -
var mouseX = 0, mouseY = 0;
var xp = 0, yp = 0;
$(document).mousemove(function(e){
$("#circlecc").css({opacity: 1})
mouseX = e.pageX - 12;
mouseY = e.pageY - 12;
});
setInterval(function(){
xp = ((mouseX - xp)/6);
yp = ((mouseY - yp)/6);
$("#circlecc").css({left: xp 'px', top: yp 'px'});
}, 20);
此外，在將游標移動到站點下方或站點之外時，圓圈也會超出站點并添加滾動條，有沒有辦法避免這種情況
網站
uj5u.com熱心網友回復：
方法是正確的。但是，有一些事情可以做不同的事情。
- 一個
setInterval繼續運行更新游標位置，甚至當滑鼠不動-這將影響性能。當檢測到滑鼠移動時setInterval，不要使用，而是使用setTimeout來更新游標位置。 - 要更新游標位置，請
transform在位置頂部和左側使用屬性，因為transform如果可能會使用硬體加速并且性能會更好。 - 使用
clientXandclientY代替pageXandpageY來檢測游標位置。請參閱screenX/Y、clientX/Y 和 pageX/Y 有什么區別？ - 要檢測滑鼠移動站，在每一個
mousemove，做setTimeout了再說X今后毫秒，并清除使用所有過去的超時clearTimeout。 - 使用
opacity和transition實作滑鼠移動停止時的淡出效果。
由于jQuery不一定需要，因此以下是不使用的解決方案jQuery（并且可以調整以使用jQuery）。
const cursor = document.querySelector(".cursor");
let mouseMovementStoppedTimer;
const mouseMovementStopped = function() {
cursor.style.opacity = 0;
}
window.addEventListener('mousemove', (function(e) {
// Make the cursor visible immediately
cursor.style.opacity = 1;
// Change position of cursor only when mousemove is detected
setTimeout(() => {
// Change cursor position using translate, clientX & clientY
cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
}, 100);
clearTimeout(mouseMovementStoppedTimer);
mouseMovementStoppedTimer = setTimeout(mouseMovementStopped, 200);
}));.cursor {
position: absolute;
background-color: red;
width: 25px;
height: 25px;
border-radius: 50%;
opacity: 0;
transition: opacity 0.5s linear;
}<div>
<span>Move the mouse to see the cursor</span>
<div class="cursor" ></div>
</div>uj5u.com熱心網友回復：
代碼已注釋。這還需要解釋嗎？
let mouseX = 0;
let mouseY = 0;
let posX = 0;
let posY = 0;
let alpha = 1;
const circle = document.querySelector(".circle");
addEventListener("mousemove", ({ clientX, clientY }) => {
mouseX = clientX;
mouseY = clientY;
// arbitrary high value so that it takes a moment until it actually fades out.
alpha = 5;
});
let prev = 0;
requestAnimationFrame(function render(now) {
requestAnimationFrame(render);
// expecting a 16ms frame interval,
// check how the current update interval compared to that
const factor = (now - prev) / 16;
prev = now;
// how quickly to follow the cursor
const speed = .125;
// adjusted for differences in update interval.
posX = factor * speed * (mouseX - posX);
posY = factor * speed * (mouseY - posY);
// fade out
alpha *= Math.pow(.95, factor);
circle.style.transform = `translate(${posX}px, ${posY}px)`;
let opacity = Math.min(1, alpha);
// round the value to closest 1/255 step
// opacity ain't more precise and that way we don't set
// "new values" that compute to the same opacity.
circle.style.opacity = Math.round(opacity * 255) / 255;
});.circle {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
}
.circle::before {
content: "";
display: block;
width: 35px;
height: 35px;
border: 1.5px solid black;
border-radius: 50%;
background: #FFFFFFC0;
transform: translate(-50%, -50%);
animation: pulse 300ms ease-in-out alternate infinite
}
p {
font-size: 1.5rem;
}
@keyframes pulse {
from {
transform: translate(-50%, -50%) scale(.8) ;
}
to {
transform: translate(-50%, -50%) scale(1.5);
}
}<div class="circle"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim quasi nobis eligendi ullam quisquam, quaerat assumenda distinctio laboriosam, voluptatum ipsum incidunt asperiores rerum. Consectetur ducimus veritatis numquam! Assumenda, molestiae quasi.</p>
<p>Eligendi ex eius quisquam cupiditate optio laboriosam maxime reiciendis quo itaque exercitationem. Distinctio eaque pariatur aliquid voluptate minus obcaecati facere quibusdam. Amet culpa id tempora nulla dolores, atque sit. Architecto!</p>
<p>Enim inventore delectus quidem qui eaque blanditiis quae quisquam impedit. Eveniet quibusdam veritatis soluta cupiditate dolor recusandae corrupti, dignissimos nam qui vero consequuntur nulla. Sequi possimus autem fugiat soluta aperiam.</p>
<p>Illo sed corrupti dolorum non nulla. Tempore recusandae fuga distinctio totam voluptas? Eos pariatur odio ipsa est facere minima sapiente omnis! Maxime nisi recusandae quis, exercitationem dolorem fuga dignissimos officia.</p>
<p>Nulla, nesciunt. Maxime beatae, dolor aliquam quasi animi mollitia nulla voluptatum, eius nisi dolores delectus ipsum tempora quas quos saepe magnam esse pariatur laudantium omnis at quaerat est consequuntur. Nulla.</p>
<p>Quasi deserunt maiores commodi ea dicta architecto, in alias odit cum doloremque hic! Consequatur molestias qui eius aspernatur dolore sapiente, doloremque optio, minima sunt, minus fugit in voluptate repudiandae numquam.</p>
<p>Amet ullam vero voluptates est expedita placeat nam repellat, hic cumque ratione sequi fuga consequatur, recusandae aliquid quaerat autem culpa quia officiis magni! Voluptatem pariatur ea, nulla culpa fugiat saepe?</p>
<p>Tempora voluptatibus itaque iste neque laudantium omnis doloremque ad est! Voluptas maxime accusantium porro corrupti, ad commodi? Ratione facere explicabo minima, dignissimos debitis harum minus similique earum veritatis? Cupiditate, reiciendis.</p>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/407063.html
標籤：