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

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

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    原生JS 多属性同时匀速运动的速度正负判断
    39
    0

    我需要实现的功能是
    1.当鼠标移入div1时,宽和高匀速变化到目标点200.
    2.当鼠标移出div1时，高和高匀速变化到目标点100.
    3.调用函数时speed传参只传正数，在move运动函数内部进行speed的正负判断。

    故障：下面的代码目前的效果是鼠标移入时正常，移出时没有匀速变化的效果。

    为了检测故障，我加了一条测试用的代码alert(startValue+':'+json[attr]+':'+speed);，测出的结果是，当div1从200运动到100时，弹出的2次结果中的speed第一次是负的，第二次居然是正的。虽然知道这是导致bug的原因，但我不知道为什么会在鼠标移出时，速度会弹出负的。

    //下面是完整代码。请哪位高手帮忙看一下，感激不尽。

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
    #div1{width: 100px;height: 100px;background-color: red;}
</style>
</head>
<body>
    <div id="div1"></div>
</body>
<script>
var div1=document.getElementById('div1');
var timer=null;

div1.onmouseover=function(){
    move({width:200,height:200},10);
}
div1.onmouseout=function(){
    move({width:100,height:100},10);
}
/*--------------------运动框架-------------------------*/

function move(json,speed){
    clearInterval(timer);
    startValue=0;
    for(var attr in json){
        startValue=parseInt(getStyle(div1,attr));
        speed=startValue>json[attr]?-speed:speed;//判断速度正负。
        alert(startValue+':'+json[attr]+':'+speed);//测试用。
    }
    timer=setInterval(function(){
        for(var attr in json){
            changeValue=0;
            changeValue=parseInt(getStyle(div1,attr));
            if((speed<0&&changeValue+speed<=json[attr])||(speed>0&&changeValue+speed>=json[attr])){
                div1.style[attr]=json[attr]+'px';
                clearInterval(timer);
            }
            else{
                div1.style[attr]=changeValue+speed+'px';
            }            
        }
    },30);
}
/*--------------------获取样式的函数-------------------------*/
function getStyle(obj,attr)
{
    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null )[attr];
}
</script> 
</html>
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得：提问者悬赏的 10 元积分
        全部回答
    • 共 0 条
    • 4号等你们扶 普通会员 1楼

      在原生JS中，可以通过以下几种方式来判断多属性同时匀速运动的速度正负：

      1. 使用HTML5的canvas元素：

      ```html

      ```

      ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d');

      // 假设有一个数组，每个元素代表一个属性的速度 var speeds = [5, 10, 15, 20];

      // 创建一个二维数组，用于存储每个属性的速度和时间 var times = []; var speedsPerTime = [];

      // 在每个属性的速度和时间中计算匀速运动的速度 for (var i = 0; i < speeds.length; i++) { var speed = speeds[i]; var time = i / speeds.length; speedsPerTime[i] = speed * time; }

      // 绘制每个属性的速度和时间 for (var i = 0; i < speedsPerTime.length; i++) { ctx.fillStyle = 'blue'; ctx.fillRect(i * 50, 50, 50, 50); ctx.fillText(speedsPerTime[i], i * 100, 50); }

      // 绘制匀速运动的速度和时间 for (var i = 0; i < speedsPerTime.length; i++) { ctx.fillStyle = 'red'; ctx.fillRect(i * 50, 50, 50, 50); ctx.fillText(speeds[i], i * 100, 50); }

      // 清除canvas上的内容 ctx.clearRect(0, 0, canvas.width, canvas.height); ```

      1. 使用JavaScript的map函数：

      ```javascript var speeds = [5, 10, 15, 20];

      var times = speeds.map(function(speed) { return Math.floor(speed / 20); });

      var speedsPerTime = times.map(function(time) { return speed * time; });

      var maxSpeed = Math.max(...speedsPerTime); var minSpeed = Math.min(...speedsPerTime);

      console.log('Max speed: ' + maxSpeed); console.log('Min speed: ' + minSpeed); ```

      以上两种方式都可以判断原生JS中的多属性同时匀速运动的速度正负。

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

    回答动态

    • 回到顶部
    • 回到顶部