缓冲运动

现象:逐渐变慢,最后停止

原理:距离越远,速度越大

速度的计算方式:

1,速度由距离决定

2,速度=(目标值-当前值)/缩放系数

说明:速度为正负数时,也决定了物体移动的方向

示例:div缓冲运动

Bug: 1,div向右运动时,无法到达指定位置 解决:速度向上取整,Math.ceil()

2,div向左运动时,无法到达指定位置 解决:速度向下取整,Math.floor()

原因:速度为小数时,造成的

总结:但凡做缓冲运动时,速度一定要取整 速度为正,向上取整 速度为负,向下取整

注意:此时不需要用if/else隔开,因为速度最后会变成0,停止下来的

html部分

<input type="button" value="开始移动" id="btn1" onclick="moveStart();" />
<div id="div1"></div>
<div id="div2"></div> <style>
#div1 { position:absolute; left:600px; width:100px; height:100px; background:red;}
#div2 { width:1px; height:200px; position:absolute; left:300px; background:black;}
</style>

js部分

<script>
var timer = null;
var speed;
function moveStart(){
var oDiv = document.getElementById("div1");
clearInterval(timer);
timer = setInterval(function(){
speed = (300 - oDiv.offsetLeft)/10;
//speed = Math.ceil(speed); //向上取整
//speed = Math.floor(speed); //向下取整
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); oDiv.style.left = oDiv.offsetLeft + speed + "px";
document.title = oDiv.offsetLeft + speed;
},30); }
</script>

  

js缓冲运动的更多相关文章

  1. JS缓冲运动案例:右侧居中悬浮窗

    JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...

  2. JS缓冲运动案例:右下角悬浮窗

    JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...

  3. JS缓冲运动案例

    点击"向右"按钮,红色的#red区块开始向右缓冲运动,抵达到黑色竖线位置自动停止,再次点击"向右"#red区块也不会再运动.点击"向左"按钮 ...

  4. [Js]缓冲运动

    一.运动框架 1.在开始运动时,关闭已有定时器(否则会不断有新的定时器执行) 2.把运动和停止隔开(if/else) 二.缓冲运动 逐渐变慢,最后停止(距离越远速度越大) 速度=(目标值-当前值)/缩 ...

  5. JS 缓冲运动 带运动的留言本 小案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. js 运动函数篇 (一) (匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动)层层深入

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...

  7. js实现缓冲运动,和匀速运动有点不相同

    缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...

  8. js动画之缓冲运动

    缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...

  9. JS运动基础(二) 摩擦运动、缓冲运动

    摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...

随机推荐

  1. leetcode day6 -- String to Integer (atoi) &amp;&amp; Best Time to Buy and Sell Stock I II III

    1.  String to Integer (atoi) Implement atoi to convert a string to an integer. Hint: Carefully con ...

  2. 微信 SDK 不能 分享

    说多了都是泪水,真的. 前段时间,做好了微信的分享功能,测试通过的,最近我又跑了一遍用例,发现不能启动微信客户端了,怎么都启动不了,日志如下:ignore wechat app signature v ...

  3. A股市场暴跌背后的三大元凶?

    周一两市低开低走,盘中空方连续打压股指,大盘一路下行,沪指2000点关口告急,收于1963.24点,跌幅超过了5%.行业板块全线溃败.银行.证券领衔大幅杀跌,板块跌幅一度超过5%:继上周五中国石油A股 ...

  4. Storm构建分布式实时处理应用初探(转)

    最近利用闲暇时间,又重新研读了一下Storm.认真对比了一下Hadoop,前者更擅长的是,实时流式数据处理,后者更擅长的是基于HDFS,通过MapReduce方式的离线数据分析计算.对于Hadoop, ...

  5. Codeforces Round #272 (Div. 1)C(字符串DP)

    C. Dreamoon and Strings time limit per test 1 second memory limit per test 256 megabytes input stand ...

  6. 命令模式在MVC框架中的应用

    事实上在项目开发中,我们使用了大量的设计模式,不过这些设计模式都封装在框架中了,假设你想要不只局限于简单的使用,就应该深入了解框架的设计思路. 在MVC框架中,模式之中的一个就是命令模式,先来看看模式 ...

  7. poj1236(强连通缩点)

    传送门:Network of Schools 题意:一些学校联接在一个计算机网络上,学校之间存在软件支援协议,每个学校都有它应支援的学校名单(A学校支援学校B,并不表示B学校一定支援学校A).当某校获 ...

  8. Android 程序静态分析

    简介 静态分析是探索Android程序内幕的一种最常见的方法,它与动态调剂双剑合璧,帮助分析人员解决分析时遇到的各种“疑难”问题. 静态分析是指在不运行的情况下,采用词法分析.语法分析等各种技术手段对 ...

  9. jQuery拖动调整表格列宽度-resizableColumns

    实现鼠标可拖动调整表格列宽度 如图: 一.引入文件: <script src="/js/jquery-1.8.0.min.js" type="text/javasc ...

  10. CSDN博客的一些问题(友好的吐槽)--后记,有一点点改进

    近期,CSDN博客真的非常不稳定,时常会出现503错误. 昨天.我发现自己的博客的訪问量仅仅有4万多,今天最终发现它变回原来的6万多了. 我写博客不是为了这个訪问量,可是,CSDN这点使用问题啦. 或 ...