gpt4 book ai didi

javascript - 如果不允许完成,光标动画会出现故障

转载 作者:行者123 更新时间:2023-12-02 19:04:24 25 4
gpt4 key购买 nike

我遇到的问题是,如果不允许动画完成,它就会出现故障。除此之外,一切都按照我的计划进行。另外,如果您发现“物理”有任何可以改进的空间,使其看起来更自然或更令人兴奋,请随意将其扔在那里!另外,我对 javascript 很陌生,所以格式建议将不胜感激!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Click Move</title>
<script type="text/javascript">
document.onmousedown = getCursorXY;

function getCursorXY(e) {
var cursorX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft :document.body.scrollLeft);
var cursorY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
positionMessage(cursorX,cursorY);
}



function positionMessage(cursorX,cursorY){
if (!document.getElementById) return false;
if (!document.getElementById("message")) return false;
var elem = document.getElementById("message");
elem.style.position = "absolute";
moveElement("message",cursorX,cursorY,20);
}





function moveElement(elementID,cursorX,cursorY,interval) {
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);

if (xpos == cursorX && ypos == cursorY) {
return true;
}
if (xpos < cursorX) {
var dist = Math.sqrt(cursorX - xpos);
xpos += dist;
}
if (xpos > cursorX) {
var dist = Math.sqrt((xpos - cursorX));
xpos -= dist;
}
if (ypos < cursorY) {
var dist = Math.sqrt((cursorY - ypos));
ypos += dist;
}
if (ypos > cursorY) {
var dist = Math.sqrt((ypos - cursorY));
ypos -= dist;
}

elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+cursorX+","+cursorY+","+interval+")";
movement = setTimeout(repeat,interval);
}

function updateSpan(element){
message = document.getElementById("message");
newMessage = document.getElementById(element.id);
message.innerHTML = newMessage.id;

}


</script>

<style type="text/css">
#message {
width: 90px;
height: 50px;
background:#999;
z-index: 20;
}

#blue_box {
position: absolute;
top: 100px;
left: 100px;
width: 60px;
height: 50px;
background:#03F;
}

#red_box {
position: absolute;
top: 200px;
left: 100px;
width: 60px;
height: 50px;
background:#F00
}
</style>
</head>

<body>
<div id="message" style="top:50px; left:100px;">WEEEEE!!!!!</div>

<div id="blue_box" onclick="updateSpan(this)">Blue_Box</div>
<div id="red_box" onclick="updateSpan(this)">Red_Box</div>
</body>
</html>

最佳答案

将其添加为函数中的第一行:

clearTimeout(movement);

功能:

function getCursorXY(e) {
clearTimeout(movement);
var cursorX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft :document.body.scrollLeft);
var cursorY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
positionMessage(cursorX,cursorY);
}

然后将其放在 getCursorXY 函数上方:

变量移动;

关于javascript - 如果不允许完成,光标动画会出现故障,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14466777/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com