JavaScript 慢慢移动的海绵宝宝

news/2024/7/7 20:44:25

前情提要:Javascript 移动的海绵宝宝

这个海绵宝宝是匀速运动、突然停下来的,有点不合理。现实中我们跑步都是速度慢慢减小到0。

要实现这个效果,就必须速度逐渐减小,本质上是盒子的步长逐渐减小

step = (targetLocation - nowLocation)/num 

其中目标位置不变,当前位置却在不断增大,num是一个定值,因此步长会逐渐减小。

但是试想一下,如targetLocation和nowLocation都是整数,num也是,step极可能出现小数,这样if(nowLocation==targetLocation)的判断就永远也不会满足

因此步长需要进行取整,向上还是向下?如果向下,假设step计算结果是0.8,那么算作0,这样存在永远抵达不了目标的可能,因此必须是向上取整,即利用Math.ceil()函数

关键代码如下

    function moveRight(obj) {clearInterval(obj.timer);obj.inter = setInterval(callback,50);function callback() {var step = (1520 - obj.clientWidth - obj.offsetLeft) / 100;var intStep = Math.ceil(step);if (1520 - obj.clientWidth == obj.offsetLeft) clearInterval(obj.inter);//判断条件换成intStep==0也可obj.style.left = obj.offsetLeft + intStep + 'px';}}moveRight(div);

 wait a minute! 这里是步长大于0前进的情况,所以向上取整,如果是后退,则应该使用Math.floor()向下取整。


http://lihuaxi.xjx100.cn/news/240760.html

相关文章

『科学计算』可视化二元正态分布3D科学可视化实战

二元正态分布可视化本体 由于近来一直再看kaggle的入门书(sklearn入门手册的感觉233),感觉对机器学习的理解加深了不少(实际上就只是调包能力加强了),联想到假期在python科学计算上也算是进行了一些尝试学…

还有这种操作?

【GDB调试】 用bat避免路径问题 :a g cyc.cpp -g -Wall -o cyc -m32 gdb32 cyc.exe pause goto a debuger.bat开O2在调试中容易出现奇怪错误,尽量不要开! 常用命令: ---------- help info 输出所有cmd指令 r 运行 ---------- b 100 在100行前…

从前端框架到前端架构参考资料

参考资料 • Wiki - MVC https://zh.wikipedia.org/wiki/MVC • Wiki - MVVM https://zh.wikipedia.org/wiki/MVVM • Mustach https://github.com/janl/mustache.js#usage • Handlebars Introduction | Handlebars • React React – A JavaScript library for building us…

Mysql 小数点后最多保留两位数

CAST(money/100 as DECIMAL(10,2)) AS num 转载于:https://www.cnblogs.com/moxiaoping/p/7611090.html

Java中的策略模式实例教程

策略模式是一种行为模式。用于某一个具体的项目有多个可供选择的算法策略,客户端在其运行时根据不同需求决定使用某一具体算法策略。 策略模式也被称作政策模式。实现过程为,首先定义不同的算法策略,然后客户端把算法策略作为它的一个参数。使…

ECMAScript 6 模板字面量的常见用法

模板字面量可以理解成是字符串的一种,形式上用反引号 将内容括起来。 目录 特点一:模板字面量会保留反引号内部的空格、回车、tab,会将\n,\t翻译。 特点二:支持字符串插值 特点三:和标签函数搭配食用 特点一:模板…

linux github安装 Pytorch

前言 因为网络原因(你懂得墙),用官网的安装办法根本无法安装pytorch,无奈去github看到了源码安装。话不多说,开始安装吧 访问github pytorch在github上的地址 pytorch有源码安装的教程: github推荐了2种安…

laravel中查看执行的SQL语句

今天想查看laravel框架中执行的SQL语句,百度了一圈,才找到,这文档真心看着不爽,下面上查看方法 DB::connection()->enableQueryLog();$navObj new NavModel();$data $navObj->where($where)->select($this->field)->orderBy(id, desc)->get();$log DB::ge…