js让页面动起来 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

变速运动

实现思路:

对每次的速度值进行计算,达到变速运动的效果

效果

logo运动


这一节我们要让物体做变速运动,也就是说要不停改变speed值,那要怎么改变或者说计算speed值呢?

速度计算代码

  1. var speed=(Target-container.offsetLeft)/5;
  2. 三目运算符 speed=speed>0?Math.ceil(speed):Math.floor(speed);
    三目运算符的形式:关系表达式 ? 表达式1 : 表达式2
    在进行速度运算中我们用三目运算符,判断speed的值,如果为正就向上取整,如果为负就向下取整

function moveStart(Target)
{
  clearInterval(timer);
  timer=setInterval(function(){
      var speed=(Target-container.offsetLeft)/5;
      speed=speed>0?Math.ceil(speed):Math.floor(speed);
      if(container.offsetLeft==Target){
          clearInterval(timer);
      }
      else{
          container.style.left=container.offsetLeft+speed+'px';
      }
    },30);
}
完善右边速度运算代码