一、运动框架

1.在开始运动时,关闭已有定时器(否则会不断有新的定时器执行)

2.把运动和停止隔开(if/else)

二、缓冲运动

逐渐变慢,最后停止(距离越远速度越大)

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

例如 var iSpeed=(iTarget-oDiv.offsetLeft)/8;

但由于除法可能产生小数,位置加上一个小数还是会被舍弃(如300.25px其实还是会被计算机当成300px),所以小数要给它向上取整,当然也有可能是负的小数,那就要向下取整

iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

潜在问题:目标值有时候也是计算出来可能是小数,也要给它取整parseInt(iTarget)

三、匀速运动的停止条件

距离足够近

if(Math.abs(oDiv.offsetLeft-iTarget)<iSpeed){           //不管往左还是往右,取绝对值

oDiv.style.left=iTarget+'px';

}

[Js]缓冲运动的更多相关文章

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

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

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

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

  3. js缓冲运动

    缓冲运动 现象:逐渐变慢,最后停止 原理:距离越远,速度越大 速度的计算方式: 1,速度由距离决定 2,速度=(目标值-当前值)/缩放系数 说明:速度为正负数时,也决定了物体移动的方向 示例:div缓 ...

  4. JS缓冲运动案例

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

  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. class&object

    类(class)是构造对象的模板或蓝图. 对象的行为是用可调用的方法定义的. import java.time.*; public class EmployeeTest{ public static ...

  2. Codeforces 713C Sonya and Problem Wihtout a Legend

    题意:给一个序列,可以进行若干次操作,每次操作选择一个数让它+1或-1,问最少要几次操作使得序列变为严格单调递增序列. 题解:首先考虑非严格递增序列,则每个数字最终变成的数字一定是该数组中的某个数.那 ...

  3. nodejs学习笔记<二>简单的node服务器

    在环境搭建好后,就可以开始动手架设(node驱动)一个简单的web服务器. 首先,nodejs还是用js编写.先来看一段node官网上的实例代码. var http = require('http') ...

  4. ecnu1624求交集多边形面积

    链接 本来在刷hdu的一道题..一直没过,看到谈论区发现有凹的,我这种方法只能过凸多边形的相交面积.. 就找来这道题试下水. 两个凸多边形相交的部分要么没有 要么也是凸多边形,那就可以把这部分单独拿出 ...

  5. poj3608Bridge Across Islands(凸包间最小距离)

    链接 以下所有文章均转载( http://blog.csdn.net/acmaker/article/details/3176910) 转载请注明出处! 考虑如下的算法, 算法的输入是两个分别有 m ...

  6. MyBatis——实现关联表查询

    原文:http://www.cnblogs.com/xdp-gacl/p/4264440.html 一.一对一关联 1.1.提出需求 根据班级id查询班级信息(带老师的信息) 1.2.创建表和数据 创 ...

  7. 颜色缩减(带Trackbar)【从毛星云Opencv3编程入门P75 P111例程改编】

    最近学了点opencv,买了毛星云的书,大力推荐哦. 颜色缩减,自己加了个Trackbar看起来更直观一些. 我一般自己先看一遍程序,脑子里有个大概印象了,再自己写一遍,这样出了错误会印象更深刻. 1 ...

  8. Deep Learning in Bioinformatics

    最近在学tensorflow,深度学习的开源工具,很好奇在生信领域深度学习都能做些什么东西. 镇楼的综述:Deep Learning in Bioinformatics 几篇文章读读看: Deep l ...

  9. Machine Learning - 第7周(Support Vector Machines)

    SVMs are considered by many to be the most powerful 'black box' learning algorithm, and by posing构建 ...

  10. 项目解析- JspLibrary - part2

    banner.jsp 验证用户是否登录 <%String manager=(String)session.getAttribute("manager"); //验证用户是否登 ...