一，匀速运动

实现原理：
核心：通过定时器setinterval（）不断移动盒子的位置
步骤：获得盒子当前的位置，通过（盒子的offsetleft）来获取
让盒子在当前位置上加上移动距离
利用定时器不断重复这个操作
加上一个结束定时器的条件
重点：offsetleft只能获取，不能赋值，需要使用styleleft来赋值
多个元素设置，使用函数封装，使用直接调用即可

注意，要操作盒子的移动必须给元素添加定位，用style.left赋值操作，需要加上单位

<style type="text/css">*{padding:0px;margin:0px;}.box{width: 200px;height: 200px;background: blue;position: absolute;/* 核心 */left:0px }.box2{background: red;margin-top: 210px;}</style></head><body><!-- 盒子移动 --><div class="box box1"></div><div class="box box2"></div><script type="text/javascript">var box1=box1=document.querySelector('.box1')var myInter=setInterval(function(){var offsetLeft=box1.offsetLeftconsole.log(offsetLeft);var num=10;var target=100;if(offsetLeft==target){
clearInterval(myInter)}else{box1.style.left=offsetLeft+num+'px'}},500)

QQ录屏20220707195737

二，缓动动画盒子（移动步长是不断变化的值）

思路
让盒子每次移动的距离慢慢变小，速度就会慢慢降下来
核心算法：（目标值-现在的位置）/10，作为每次移动的距离，步长
注意；通过算法，会有小数出现，如果盒子向右移动。我们一般采用向上取整（math.ceil），盒子向左移动，我们一般采用向下取整（floor）
停止的条件，让盒子当前的距离等于目标距离，就停止定时器。

代码实现

<style>*{margin: 0;padding: 0;}div{width: 200px;height: 200px;background-color: red;position:absolute;}
</style>
<body><div></div><script>var Div=document.querySelector('div');Div.addEventListener('click',function(){var timer=setInterval(function(){var num=Div.offsetLeftconsole.log(num);
var target=500;
var divnum=Math.ceil((target-num)/10);if(num==target){clearInterval(timer)}else{Div.style.left=num+divnum+'px';
}},30)
})</script>
</body>
</html>

注意，想给盒子设置移动就必须获得他的位置，必须给盒子添加定位！

盒子缓动动画

三，作者语录

以后的你，一定会感谢现在不懈努力的自己

原生JavaScript盒子的移动相关推荐

php拼图游戏开发,原生javascript制作的拼图游戏实现方法详解
本文实例讲述了原生javascript制作的拼图游戏实现方法.分享给大家供大家参考,具体如下: 实现方法 //1.让所有的li(在ul里)可以拖拽 //2.交换li的位置计算背景图位置 //1.让 ...
分享10个原生JavaScript技巧
首先在这里要非常感谢无私分享作品的网友们,这些代码片段主要由网友们平时分享的作品代码里面和经常去逛网站然后查看源文件收集到的.把平时网站上常用的一些实用功能代码片段通通收集起来,方便网友们学习使用,利 ...
animate用法 js原生_用原生Javascript 创建带动画的固顶导航菜单
当我们在网页中加入一个导航菜单的时候,需要考虑很多因素.如何确定它的位置?如何定义样式?还需要保证它具有良好的响应性.又或者你想为它添加一些炫酷的动画.这时你可能会对 jQuery 感兴趣,因为它会帮 ...
mysql插入ㄖ_原生JavaScript代码100个实例
1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...
java文件异步上传_[Java教程]原生javascript实现文件异步上传
[Java教程]原生javascript实现文件异步上传 0 2017-10-25 19:00:06 效果图: 代码:(demo33.jsp) demo33.jsp名称文件确定本文网址:http:/ ...
[译] 原生 JavaScript 值得学习吗？答案是肯定的
原文地址:Is Vanilla JavaScript worth learning? Absolutely. 原文作者:David Kopal 译文出自:掘金翻译计划本文永久链接:github.co ...
React jsx转换成原生JavaScript的一个例子
jsx代码: var React = require('react'); var ReactDOM = require('react-dom'); var MyButtonController = r ...
原生希望原生JavaScript开篇
本篇文章个人在深圳游玩的时候突然想到的...最近就有想写几篇关于原生希望的文章,所以回家到之后就奋笔疾书的写出来发布了一直对前端技巧很有兴致,就心生了写一个专栏的动机,然后就申请了原生JavaScr ...
一些常用且实用的原生 JavaScript函数[转]
日常开始中常用到的一些原生JavaScript函数,比较实用, 今天特地整理一下,分享给大家,希望对大家有用,会常更新,同时也欢迎大家补充. css及html方面的技巧总结,点此前往: 前端开发中一些 ...

原生JavaScript盒子的移动

一，匀速运动

二，缓动动画盒子（移动步长是不断变化的值）

三，作者语录

以后的你，一定会感谢现在不懈努力的自己

原生JavaScript盒子的移动相关推荐

最新文章

热门文章