【JS-匀速运动-运动停止】的更多相关文章

[Js]弹性运动

描述:像弹簧一样左右弹动,最后缓慢停下来 一.加减速运动 1.加速运动 var iSpeed=0;iSpeed++; 速度越来越快,最后冲出去 2.减速运动 var iSpeed=20;iSpeed--; 速度越来越慢,降到0后开始变负值往反方向运动 二.弹性运动 1.在目标点左边,加速:目标点右边,减速,如if(div1.offsetLeft<300){    iSpeed=iSpeed+1;     //等同iSpeed++;}else{    iSpeed=iSpeed-1;} 这是最简单…

[Js]高级运动

一.链式运动框架 1.他需要一个回调函数,在运动停止时,开始下一次运动(执行函数) 多物体运动框架改为如下: function startMove(obj,attr,iTarget,fn){ ... if(iCur==iTarget){ clearInterval(obj.timer); fn(); }... }; 然后就可以用它,比如先变宽再变高最后变透明度 startMove(this,'width',300,function(){ startMove(this,'height',300,f…

JS缓冲运动案例：右侧居中悬浮窗

JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>JS小案例:右侧缓冲悬浮框</title> <style> body { height: 2000px; margin: 0px; } #div1 { width: 100px; height: 150px…

JS缓冲运动案例：右下角悬浮窗

JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>JS小案例:右侧缓冲悬浮框</title> <style> body { height: 2000px; margin:…

JS的运动1（从简单到复杂运动，从单一属性到多属性同时进行的运动过程分析）

js运动原理 运动基础 在js中,让一个元素动起来的最简单的方式,就是点击按钮,让元素移动.下面是一个简单的案例:(下面几个案例的的html和css都是采用这个为例) <!DOCTYPE html> <html lang="zh"> <head> <title></title> <style> #d1 { width: 100px; height: 100px; background-color: red; pos…

js匀速运动框架案例

点击"开始运动"按钮,红色的#red区块开始向右匀速运动,抵达到黑色竖线位置自动停止,再次点击"开始运动"#red区块也不会再运动.同时为了便于后期维护,要求运动速度可在代码中灵活调整. 细节要求: 1.点击开始运动按钮后,在抵达终点线前,无论再次点击多少次按钮,#red区块均维持运动速率不变. 2.#red区块最后停滞位置不能超出黑色竖线. <!DOCTYPE html> <html lang="zh-CN"> <…

[Js]缓冲运动

一.运动框架 1.在开始运动时,关闭已有定时器(否则会不断有新的定时器执行) 2.把运动和停止隔开(if/else) 二.缓冲运动 逐渐变慢,最后停止(距离越远速度越大) 速度=(目标值-当前值)/缩放系数 例如 var iSpeed=(iTarget-oDiv.offsetLeft)/8; 但由于除法可能产生小数,位置加上一个小数还是会被舍弃(如300.25px其实还是会被计算机当成300px),所以小数要给它向上取整,当然也有可能是负的小数,那就要向下取整 iSpeed=iSpeed>0?M…

JS完美运动框架

这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (opera没测) 备注:参考了智能社blur老师的代码 */ /*-------------------------------------------------------- 功能: 获取某个节点下的带有某个class的所有节点 输入: oParent:要获取的class元素的父级节点 sClas…

js匀速运动停止条件

匀速运动,怎么让它到达指定位置时停止呢? 原理: 1,物体和目标的差值距离小于等于速度时,即停止 2,接着让物体移动位置等于目标位置 示例:匀速运动停止 html部分 <input type="button" value="100米" id="btn1" onclick="startMove(100);" /> <input type="button" value="300米&q…

js缓冲运动

缓冲运动 现象:逐渐变慢,最后停止 原理:距离越远,速度越大 速度的计算方式: 1,速度由距离决定 2,速度＝(目标值-当前值)/缩放系数 说明:速度为正负数时,也决定了物体移动的方向 示例:div缓冲运动 Bug: 1,div向右运动时,无法到达指定位置 解决:速度向上取整,Math.ceil() 2,div向左运动时,无法到达指定位置 解决:速度向下取整,Math.floor() 原因:速度为小数时,造成的 总结:但凡做缓冲运动时,速度一定要取整 速度为正,向上取整 速度为负,向下取整 注意…