账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    javascript一串跟随鼠标的div的问题：为什么for++效果和for--截然不同
    82
    0

    代码如下：

    
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {width:10px; height:10px; background:red; position:absolute;}
</style>
<script>
function getPos(ev)
{
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
    
    return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}

document.onmousemove=function (ev)
{
    var aDiv=document.getElementsByTagName('div');
    var oEvent=ev||event;
    
    var pos=getPos(oEvent);
    
    for(var i=1; i <aDiv.length;i++)
    {
        aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
        aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
    }
    // for(var i=aDiv.length-1;i>0;i--)
    // {
    //     aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
    //     aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
    // }
    
    aDiv[0].style.left=pos.x+'px';
    aDiv[0].style.top=pos.y+'px';
};
</script>
</head>

<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

    请问为何中间那段循环，用注释掉的版本来写（for--）可以有强烈的拖尾效果，用for++效果不明显，甚至完全没效果了。请问这是什么原理？

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • ジ世中沉沦〆 普通会员 1楼

      在JavaScript中，for++和for--分别表示对当前迭代器的前一个值和后一个值进行操作。虽然这两个操作在某些情况下可以产生相同的结果，但它们的实现方式和影响因素有所不同。

      for++操作是在每次循环中增加当前迭代器的值。例如，如果你有一个名为div的div元素，并使用for++操作让它跟随鼠标移动，那么div的初始位置将是鼠标当前位置。然后，每次循环，div的位置都会向前移动一个像素。当for++操作完成时，div的位置会接近其初始位置。

      而for--操作则是在每次循环后减少当前迭代器的值。例如，如果你有一个名为div的div元素，并使用for--操作让它跟随鼠标移动，那么div的初始位置将是鼠标当前位置。然后，每次循环，div的位置都会向后移动一个像素。当for--操作完成时，div的位置会接近其初始位置。

      尽管这两种操作在某些情况下可以产生相同的结果，但在实际使用中，它们的实现方式和影响因素有所不同。例如，如果你在一个复杂的DOM结构中使用for++操作，那么它可能会导致意外的结果。而如果你在一个简单的DOM结构中使用for--操作，那么它可能会更可靠。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部