Fatal编程技术网
  • javascript/
  • Javascript 如果不允许完成，光标动画会出现小故障

Javascript 如果不允许完成，光标动画会出现小故障

javascript animation

Javascript 如果不允许完成，光标动画会出现小故障,javascript,animation,onclick,event-listener,Javascript,Animation,Onclick,Event Listener,我遇到的问题是，如果不允许动画完成，它将出现故障。 除此之外，一切都按照我的计划进行。此外，如果你看到任何可以改进“物理”的地方，让它看起来更自然或更令人兴奋，那么你可以把它扔进去！另外，我是javascript新手，所以格式建议将不胜感激 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

我遇到的问题是，如果不允许动画完成，它将出现故障。 除此之外，一切都按照我的计划进行。此外，如果你看到任何可以改进“物理”的地方，让它看起来更自然或更令人兴奋，那么你可以把它扔进去！另外，我是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>


单击“移动”
document.onmousedown=getCursorXY；
函数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）；
位置消息（cursorX，cursorY）；
}
函数位置消息（cursorX，cursorY）{
如果（！document.getElementById）返回false；
如果（！document.getElementById（“message”））返回false；
var elem=document.getElementById（“消息”）；
elem.style.position=“绝对”；
moveElement（“消息”，cursorX，cursorY，20）；
}
函数moveElement（elementID、cursorX、cursorY、interval）{
如果（！document.getElementById）返回false；
如果（！document.getElementById（elementID））返回false；
var elem=document.getElementById（elementID）；
var xpos=parseInt（elem.style.left）；
var ypos=parseInt（elem.style.top）；
如果（xpos==cursorX&&ypos==cursorY）{
返回true；
}
如果（xposcursorX）{
var dist=Math.sqrt（（xpos-cursorX））；
xpos-=dist；
}
如果（ypos<粗略）{
var dist=Math.sqrt（（粗略的-ypos））；
ypos+=距离；
}
如果（ypos>粗略）{
var dist=数学sqrt（（ypos-粗略））；
ypos-=dist；
} 
elem.style.left=xpos+“px”；
elem.style.top=ypos+“px”；
var repeat=“moveElement”（“+elementID+”、“+cursorX+”、“+cursorY+”、“+interval+”）；
移动=设置超时（重复，间隔）；
}
函数updateSpan（元素）{
message=document.getElementById（“消息”）；
newMessage=document.getElementById（element.id）；
message.innerHTML=newMessage.id；
}
#信息{
宽度：90px；
高度：50px；
背景：#999；
z指数：20；
}
#蓝盒{
位置：绝对位置；
顶部：100px；
左：100px；
宽度：60px；
高度：50px；
背景：#03F；
}
#红盒子{
位置：绝对位置；
顶部：200px；
左：100px；
宽度：60px；
高度：50px；
背景：#F00
}
WEEEEE！！！！！
蓝盒
红盒子
将此添加为函数的第一行：

clearTimeout(movement);
功能：

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函数上方：

clearTimeout(movement);
var运动

谢谢大家!！我试图清除超时，但忽略了定义变量！谢谢