js运动

最新推荐文章于 2022-11-16 19:39:03 发布
最新推荐文章于 2022-11-16 19:39:03 发布
阅读量264 收藏
点赞数 1
分类专栏： javascript js运动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GofAnderson/article/details/79821991
版权

运动的本质——>物体的状态发生连续性的变化

匀速运动

这里写图片描述

<divstyle="height:100px; width:100px; background: orange; position:absolute; left:0px; top: 0px;"></div>
<button style="position: absolute; left:0px; top:150px;">run</button>
<span style="width:1px; height:100px; background:black; position:absolute; left:300px; top:0px;"> </span>


<script>
  var oDiv = document.getElementsByTagName('div')[0],
      oBtn = document.getElementsByTagName('button')[0],
      iSpeed = 10,  //控制速度
      timer;

  oBtn.onclick = function () {
      startMove(oDiv);
  }

  function startMove (obj) {
      clearInterval(timer); //开启定时器之前，先把上一个定时器清除
      timer = setInterval(function () {
         obj.style.left = obj.offsetLeft + iSpeed + 'px';
      },30)
  }




</script>

添加条件；到达300位置停止
这里写图片描述

function startMove (obj) {
    clearInterval(timer);
    timer = setInterval(function () {
        if(obj.offsetLeft === 300) {  //判断如果到达300的位置，就停止运动
            clearInterval(timer);
        }else{
            obj.style.left = obj.offsetLeft + iSpeed + 'px';
        }
    },30)
}

当iSpeed不被300整除时，让方块停到300

function startMove (obj) {
  clearInterval(timer);
  timer = setInterval(function () {
      if(obj.offsetLeft >= 300) {  //判断如果到达300的位置，就停止运动
          clearInterval(timer);
          obj.style.left = '300px'; //超过后，让方块回来一点点，正好停在300位置
      }else{
          obj.style.left = obj.offsetLeft + iSpeed + 'px';
      }
  },30)
}

或者

function startMove (obj) {
  clearInterval(timer);
  timer = setInterval(function () {
      if(300 - obj.offsetLeft < iSpeed) {  //判断如果终点和方块位置的差小于步长，就停止定时器；
          clearInterval(timer);
          obj.style.left = '300px'; 
      }else{
          obj.style.left = obj.offsetLeft + iSpeed + 'px';
      }
  },30)
}

如果方块在300的右侧
这里写图片描述

function startMove (obj) {
   clearInterval(timer);
   if(obj.offsetLeft > 300) {
       iSpeed = -8; //如果方块在终点右侧，则速度为负
   }else{
       iSpeed = 8;  //如果方块在终点左侧，则速度为正
   }
   timer = setInterval(function () {
       if(Math.abs(300 - obj.offsetLeft) < Math.abs(iSpeed)) {  //判断方块与终点的差，是否小于步长
           clearInterval(timer);
           obj.style.left = '300px';
       }else{
           obj.style.left = obj.offsetLeft + iSpeed + 'px';
       }
   },30)
}

缓冲运动

function startMove (obj) {
    clearInterval(timer);
    timer = setInterval(function () {
        iSpeed = (300 - obj.offsetLeft) / 7; 
        console.log(iSpeed); //最后会在0.14左右无限循环
        obj.style.left = obj.offsetLeft + iSpeed + 'px';
    },30)
}

这里写图片描述

offsetLeft是向下取整的，所以加上的iSpeed如果小于1；那么就永远无法到达300位置，永远停留在299的位置上；
所以需要给iSpeed判断；

function startMove (obj) {
    clearInterval(timer);
    timer = setInterval(function () {
        iSpeed = (300 - obj.offsetLeft) / 7;
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
        //如果方块在左侧；则iSpeed大于0，向上取整。
        //如果方块在右侧；则iSpeed小于0，向下取整。
        if(obj.offsetLeft === 300) {
            clearInterval(timer)
        }else {
            obj.style.left = obj.offsetLeft + iSpeed + 'px';
        }
    },30)
}

小练习；页面滑出插件

鼠标移入
这里写图片描述

var oDivWrapper = document.getElementsByTagName('div')[0],
    timer = null;

oDivWrapper.onmouseenter = function () {
    startMove(this, 0); //鼠标移入弹出
}

oDivWrapper.onmouseleave = function () {
    startMove(this, -400); //鼠标移出弹回
}

function startMove (obj,target) { //target为目标点
    clearInterval(timer);
    var iSpeed;
    timer = setInterval(function () {
        iSpeed = (target - obj.offsetLeft) / 7;
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
        if(obj.offsetLeft === target) {
            clearInterval(timer);
        }else {
            obj.style.left = obj.offsetLeft + iSpeed + 'px';
        }
    },30)
}

getStyle函数应用

function getStyle(obj, attr) {
   if(obj.currentStyle) {
       return obj.currentStyle[attr];
   }else{
       return window.getComputedStyle(obj, false)[attr];
   }
}
 <div style="width:100px;height:100px;background:red;opacity:0.9"></div>

<script>
    console.log(getStyle(oDiv, 'width'), typeof(getStyle(oDiv, 'width')))；
    //  100px string

    console.log(getStyle(oDiv, 'opacity'), typeof(getStyle(oDiv, 'opacity')));
    // 0.9 string

    console.log(parseInt(getStyle(oDiv, 'width')), typeof(getStyle(oDiv, 'width')));
    // 100 "string"

    console.log(parseFloat(getStyle(oDiv, 'opacity')), typeof(getStyle(oDiv, 'opacity')));
    // 0.9 "string"
</script>

这里写图片描述

<div style="width:100px;height:100px;background:red;opacity:0.9"></div>
<script>
    var oDiv = document.getElementsByTagName('div')[0];
    var timer = null;

    function getStyle(obj, attr) {
      if(obj.currentStyle) {
           return obj.currentStyle[attr];
       }else{
           return window.getComputedStyle(obj, false)[attr];
       }
   }

    function startMove(obj, target) {
        clearInterval(timer);
        var iSpeed;
        timer = setInterval(function () {
            iSpeed = (target - getStyle(obj, 'opacity')); 
            //target<= 1; opacite <= 1;
            //所以，iSpeed取整之后，不是 +1 就是 0 或者 -1；
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); 
            obj.style.opacity = parseFloat(getStyle(obj, 'opacity')) + iSpeed;
            //opacity加上 -1 再向下取整是 -1；而opacity的最小值是0，这时target - opacity的值为正，iSpeed的值就为1，所以，对象的透明度在0与1之间来回变化
        }, 30)
    }

    startMove(oDiv, 0.5)

</script>

opacity加上 -1 再向下取整是 -1；而opacity的最小值是0，这时target - opacity的值为正，iSpeed的值就为1，所以，对象的透明度在0与1之间来回变化;

解决方法，把数据扩大100倍，最后再/100；

function startMove(obj, target) {
    clearInterval(timer);
    var iSpeed,
        iCur; //当前值
    timer = setInterval(function () {
        iCur = getStyle(obj, 'opacity') * 100;
        iSpeed = (target - iCur) / 7;   
        //当前值扩大了100倍，这里的target（目标值）也要扩大100倍
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
        if(iCur == target) {
            clearInterval(timer);
        }else{
            obj.style.opacity = (iCur + iSpeed) / 100;
        }
    }, 30)
}

oDiv.onclick = function () {
    startMove(oDiv, 50);
}

改变多个对象宽度

这里写图片描述

var oDivArray = document.getElementsByTagName('div');
var timer = null;

for(var i = 0; i < oDivArray.length; i++) {
    oDivArray[i].onmouseenter = function () {
        startMove(this, 400); //鼠标移入改变当前对象宽度
    }
    oDivArray[i].onmouseleave = function () {
        startMove(this, 100);  //鼠标移出，把当前的宽度变回100
    }
}


function startMove (obj,target) {
    clearInterval(timer);
    var iSpeed;
    timer = setInterval(function () {
        iSpeed = (target - obj.offsetWidth) / 7;
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
        if(obj.offsetWidth === target) {
            clearInterval(timer);
        }else {
            obj.style.width = obj.offsetWidth + iSpeed + 'px';
        }
    },30)
}

因为都在一个定时器里面，所以，鼠标快速移动时，上一个定时器还没有执行完，下一个定时器就开启了；在开启下一个定时器时，又把上一个定时器删除了，所以上一个对象就不能恢复到100了

解决方法

把定时器变成每一个对象的自身属性；清理时也清除自身的这个属性

function startMove (obj,target) {
   clearInterval(obj.timer);
   var iSpeed;
   obj.timer = setInterval(function () {
       iSpeed = (target - obj.offsetWidth) / 7;
       iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
       if(obj.offsetWidth === target) {
           clearInterval(obj.timer);
       }else {
           obj.style.width = obj.offsetWidth + iSpeed + 'px';
       }
   },30)
}

通过startMove让元素的多个属性同时发生变化

这里写图片描述

oDivArray[0].onclick = function () {
   startMove(this, 400, 'width');
}
oDivArray[1].onclick = function () {
   startMove(this, 400, 'height');
}
oDivArray[2].onclick = function () {
   startMove(this, 50, 'opacity');
}
oDivArray[3].onclick = function () {
   startMove(this, 10, 'borderWidth');
}

function startMove (obj, target, attr) {
    clearInterval(obj.timer);
    var iSpeed;
    obj.timer = setInterval(function () {
        if(attr == 'opacity') {
            iCur = parseFloat(getStyle(obj, attr)) * 100;
        }else {
            iCur = parseInt(getStyle(obj, attr));
        }
        iSpeed = (target - iCur) / 7;
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

        if(iCur === target) {
            clearInterval(obj.timer); 
        }else {
            if(attr == 'opacity') {
                obj.style.opacity = (iCur + iSpeed) / 100;
            }else {
                obj.style[attr] = iCur + iSpeed + 'px';
            }
        }
    },30)
}

重点：多物体、多值、链式调用框架

这里写图片描述

这里写图片描述

var oDivArray = document.getElementsByTagName('div');
var timer = null;

var targetObj = {
    width: 400,
    height: 400,
    opacity: 50,
    left: 300,
    top: 200
}


oDivArray[0].onclick = function () {
   startMove(this, targetObj, function () {
       startMove(oDivArray[1], targetObj);
   });
}

function getStyle(obj, attr) {
   if(obj.currentStyle) {
       return obj.currentStyle[attr];
   }else{
       return window.getComputedStyle(obj, false)[attr];
   }
}

function startMove(obj, json, callback) {
  clearInterval(obj.timer);
  var iSpeed,
      iCur;
  obj.timer = setInterval(function () {
      var bStop = true;
      for(var attr in json) {
          if(attr == 'opacity') {
              iCur = parseFloat(getStyle(obj, attr)) * 100;
          }else {
              iCur = parseFloat(getStyle(obj, attr));
          }
          iSpeed = (json[attr] - iCur) / 7;
          iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
          if(attr == 'opacity') {
              obj.style.opacity = (iCur + iSpeed) / 100;
          }else {
              obj.style[attr] = iCur + iSpeed + 'px';
          }
          if(iCur != json[attr]) {
              bStop = false;
          }
          if(bStop) {
              clearInterval(obj.timer);
              typeof callback == 'function' ? callback() : ''; //判断参数是否是函数，是就执行（链式调用）；
          }
      }
  }, 30)
}
GofAnderson
关注
专栏目录
JS缓冲运动案例
请叫我二狗哥
08-01 234
点击“向右”按钮，红色的#red区块开始向右缓冲运动，抵达到黑色竖线位置自动停止，再次点击“向右”#red区块也不会再运动。点击“向左”按钮，红色的#red区块开始向左缓冲运动，抵达到蓝色竖线位置自动停止，再次点击“向左”#red区块也不会再运动。 <!DOCTYPE html> <html lang="zh-CN"> <head> <...
js运动框架
小白牛的博客
10-26 713
js的运动框架 . 第一次写博客希望谅解 js的运动框架其实就是对于元素的位置的改变 1：理解style和offsetstyle的区别 2：Json和fon in的运用 3：数学知识的理解 js代码 function getStyle(obj,name) { //解决兼容性问题，对于js中的原生库里面的理解，获取属性 if(obj.currentStyle) ...
js运动（一）
jo miro的博客
12-09 139
为了前端运动和交互不是那么突兀和死板，而是更加自然，友好对待我们的感官，我们通常会引入过渡。 使元素逐步过渡到我们预定到的值。 这时我们就需要引入循环定时器setInterval（）； 这样就可以控制元素值，逐步到达预定值。 我们采用视觉上的误差，给元素循环累加到预定的值。 注意：为了避免定时器的累加效应，需要在每次开启定时器前先把之前的clear了。 所以要给定时器定义一个全局变量， 否则，先clear定时器就会报未定义的错误。 但...
JS运动----（4）
眷恋天空的驴
03-17 276
【ps】多物体运动框架现在比较的成熟，但是还是不够完善，等学完任意值的运动框架自然会明白。 4 任意值运动框架  1：记住：不要随意用offsetwidth一系列值。用currentStyle代替offset  2：计算机对小数的处理很弱的，要避免使用小数。对小数是模拟的  3：原有运动框架的问题-只能让某个值运动起来---如果想让其他值运动起来，要修改程序。  4：扩展的运动框架--运动属性
JavaScript运动
happy_kx的博客
04-14 976
在js中实现运动的原理： 在开启定时器setInterval()/setTimeout()和清楚定时器clearInterval()/clearTimeout()来控制运动，其中setInterval()方法可以让物体动起来,而clearInterval()方法可以让运动停止；在定时器过程中不断更改需要改变的值。 总结一下运动所需要用到的知识： 1.定时器（异步的 多次） let id = setInterval(function(){},毫秒值) clearInterval(id) 2.延时器
Js运动
weixin_44928961的博客
02-22 3037
JavaScript之Js运动 在我们进行web开发的过程中，为了与用户进行更加友好、有趣的交互，拥有一套完美的运动框架就能轻松解决。 这次就给大家带来Javascript学习中Js运动的编写和注意事项。实现运动的思想很简单，首先对这个元素获取定位，然后通过改变该元素的left值和top值或者透明度，通过定时器就可以实现元素的运动效果。 Js运动代码编写的过程，基本步骤如下： 1、关闭上一次定时器...
JS运动函数
最新发布
前端开发,HTML5,css3,JavaScript,node.js,vue
11-16 789
运动函数,div盒子移动
JS运动封装
Steve_Richard的博客
08-21 205
添加链接描述
JS运动开发框架
qq_41915936的博客
07-17 768
一、为什么要学习运动框架 在我们进行web页面开发的过程中，如何与用户进行友好、有趣的交互，是我们必须考虑的问题。 比如：导航条中滑动的动画特效、点击加入购物车按钮通过抛物线加入右侧购物车的动画特效，当然还有一些网页游戏的开发：微信打飞机、打砖块等。 那么我们要实现这些好玩又有趣的动画，就需要我们对动画的基础【运动】炉火纯青，那么这个部分的学习，我们会对运动展开学习，并且通过大量的实例来帮助大家完成这个阶段的学习。 二、运动原理 Js运动，本质来说，就是让 web 上 DOM 元素动起来。而想要 DOM 动
JS运动框架制作
weixin_59902634的博客
09-20 222
js运动框架制作
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
10-15
以下是对标题和描述中提到的原生JavaScript运动函数封装的详细说明： 1. **匀速运动封装**： - `moveObj` 函数是用于封装匀速运动的基本实现。它接受6个参数：目标DOM对象、样式属性（如`top`、`left`等）、起始...
JS运动特效之完美运动框架实例分析
10-18
本篇文章将探讨“JS运动特效之完美运动框架实例分析”，着重讲解如何处理元素运动中的属性检测与判断，以确保所有设定的运动都能正确完成。 在JavaScript中，我们通常使用定时器（`setInterval`）来实现动画效果，...
JS运动特效之链式运动分析
11-28
总的来说，链式运动是JavaScript运动特效中的一个重要概念，它通过巧妙地组合和调用回调函数，实现了元素的连续动画效果。这种技术在网页交互设计中有着广泛的应用，能提升用户体验并增强页面的视觉吸引力。
js运动事件函数详解
10-21
JavaScript运动事件函数是编程中用于创建平滑动画和交互动效的关键技术之一。其核心在于通过改变DOM元素的样式属性（如位置、透明度、尺寸等）来产生动态效果。在本文中，我们将深入探讨JavaScript中实现运动事件...
tool.js
小豆子的博客
04-05 2174
1.封装兼容性的 addEvent(elem, type, handle);方法 2.封装取消冒泡的函数 stopBubble(event) 3.封装阻止默认事件的函数 cancelHandler(event); 获取样式getStyle 多物体、多值、链式调用框架 1.封装兼容性的 addEvent(elem, type, handle);方法 functio...
js事件处理程序的运行环境(改变attachEvent内部的this指向&封装兼容性的 addEvent方法)
小豆子的博客
04-03 921
改变attachEvent内部的this指向 封装兼容性的 addEvent(elem, type, handle);方法 &lt;div style="width:100px; height:100px; background-color:red"&gt;&lt;/div&gt; &lt;script&gt; var div = document.getElemen...
js解除事件处理程序
小豆子的博客
04-03 373
ele.onclick = false/‘’/null; ele.removeEventListener(type, fn, false); ele.detachEvent(‘on’ + type, fn); ele.onclick = false/‘’/null; &lt;div style="width:100px; height:100px; background-...
js运动（轮播图）
小豆子的博客
04-06 358
轮播图 轮播图生成器 轮播图 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, ini
js事件处理模型——事件冒泡、捕获
小豆子的博客
04-03 351
事件冒泡： 事件捕获： 其他形式的捕获 取消冒泡 封装取消冒泡的函数 stopBubble(event) 阻止默认事件: 封装阻止默认事件的函数 cancelHandler(event); 事件冒泡： 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上） &lt;div class="wrapper"&gt;...
掌握JavaScript运动实现：原理与方法解析
JavaScript运动的核心在于通过改变元素的定位属性，如left、right、top、bottom等，来模拟对象的移动。实现这一功能的关键在于理解运动的相对性和使用定时器控制运动过程。 1. 物体运动原理： 在JS中，物体的运动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值