JavaScript之减速运动的实现

本文主要介绍如何利用JS以及定位实现元素的减速运动。

1.案例目标

盒子向右进行减速移动，移至300px处即停止

2.核心思路

通过目标位置的值减去盒子距离屏幕左侧的距离，即可得到盒子每次移动前距离目标位置的值。每次盒子移动的距离都是所剩距离的十分之一，循环往复，直至到达目标位置。由于JS小数的计算存在精度问题，故需要进行取整操作。

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">* {padding: 0px;margin: 0px;}.box {width: 200px;height: 200px;background: blue;position: absolute;left: 0px;transition: left 0.5s;}</style>
</head><body><div class="box"></div><script type="text/javascript">var box = document.querySelector('.box');linearMove(box, 300);function linearMove(obj, target) {var myInter = setInterval(function() {var offsetLeft = obj.offsetLeft;var num = (target - offsetLeft) / 10;num > 0 ? num = Math.ceil(num) : Math.floor(num);if (offsetLeft == target) {clearInterval(myInter);} else {obj.style.left = offsetLeft + num + 'px';}}, 1000)}</script></body></html>

效果如图：

JavaScript之减速运动的实现相关推荐

javascript运动系列第二篇——变速运动
前面的话前面介绍过匀速运动的实现及注意事项,本文在匀速运动的基础上,更进一步,实现各种变速运动,包括加速运动.减速运动.缓冲运动.重力运动和弹性运动准备工作匀速运动在原生javascript中 ...
java计算加速减速_Javascript加速运动与减速运动
加速运动,即一个物体运动时速度越来越快:减速运动,即一个物体运动时速度越来越慢.现在用Javascript来模拟这两个效果,原理就是用setInterval或setTimeout动态改变一个元素与另外 ...
javascript运动学教程
本文系笔者学习原生javascript动效的笔记.内容基于某非著名培训机构的视频教程.并重新做了归类整理.删除了一些过时的内容.并重做了GIF图,加上了自己的一些分析. 一. 运动学基础引子:从左到 ...
java模拟加速匀速减速_Javascript模拟加速运动与减速运动代码分享
加速运动,即一个物体运动时速度越来越快:减速运动,即一个物体运动时速度越来越慢.现在用Javascript来模拟这两个效果,原理就是用setInterval或setTimeout动态改变一个元素与另外 ...
原生JavaScript中动画与特效的实现原理
现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...
java模拟加速匀速减速_JS实现匀加速与匀减速运动的方法示例
本文实例讲述了JS实现匀加速与匀减速运动的方法.分享给大家供大家参考,具体如下: /* * 动画帧函数 * * */ var requestFrame=function(){ var prefixLi ...
php 加减速操作,JS实现匀加速与匀减速运动的代码分享
这篇文章主要介绍了JS实现匀加速与匀减速运动的方法,涉及javascript结合时间函数与数学运算动态操作页面元素样式的相关实现技巧,需要的朋友可以参考下本文实例讲述了JS实现匀加速与匀减速运动的方 ...
【AJAX】JavaScript的面向对象
Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...
【JavaScript总结】JavaScript语法基础：JS高级语法
作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...

JavaScript之减速运动的实现

1.案例目标

2.核心思路

JavaScript之减速运动的实现相关推荐

最新文章

热门文章