[Js]缓冲运动
一、运动框架
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]缓冲运动的更多相关文章
- JS缓冲运动案例:右侧居中悬浮窗
JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...
- JS缓冲运动案例:右下角悬浮窗
JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...
- js缓冲运动
缓冲运动 现象:逐渐变慢,最后停止 原理:距离越远,速度越大 速度的计算方式: 1,速度由距离决定 2,速度=(目标值-当前值)/缩放系数 说明:速度为正负数时,也决定了物体移动的方向 示例:div缓 ...
- JS缓冲运动案例
点击"向右"按钮,红色的#red区块开始向右缓冲运动,抵达到黑色竖线位置自动停止,再次点击"向右"#red区块也不会再运动.点击"向左"按钮 ...
- JS 缓冲运动 带运动的留言本 小案例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- js 运动函数篇 (一) (匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动)层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...
- js实现缓冲运动,和匀速运动有点不相同
缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...
- js动画之缓冲运动
缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...
- JS运动基础(二) 摩擦运动、缓冲运动
摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...
随机推荐
- 管道寄售库存MRKO结算后,冲销问题
管道寄售库存MRKO结算后,冲销问题 1.通常使用MIRO对采购订单进行发票校验后,若发现校验错误,直接使用MR8M取消发票校验,同时手工F-03对借发票校验借方GRIR和取消发票校验的贷方GRIR进 ...
- Android_Nexus4_屏幕截图
1. 一般都是 音量-键 + 电源键,同时按一秒以上 2. 3.
- [转载] 跳表SkipList
原文: http://www.cnblogs.com/xuqiang/archive/2011/05/22/2053516.html leveldb中memtable的思想本质上是一个skiplist ...
- openerp安装记录及postgresql数据库问题解决
ubuntu-14.04下openerp安装记录1.安装PostgreSQL 数据库 a.安装 sudo apt-get install postgresql 安装后ubu ...
- number-of-segments-in-a-string
https://leetcode.com/problems/number-of-segments-in-a-string/ package com.company; class Solution { ...
- Android照相机模块编程 照片颠倒问题及查询摄像头参数问题的解决
这两天编程弄Android照相机模块,设置好各种参数后,发现预览的时候,照片是颠倒了,不是上下颠倒而是颠倒90°. 我的手机是华为U9200,用的Android4.0.3,后来看到http://www ...
- jQuery的单选,复选,下拉
单选 获取 ($('input:first').attr('vlaue')); 选中 ($('input:checked').val()); 属性值的设置$().val(属性值)$('input:fi ...
- python语法笔记(二)
1. 循环对象 循环对象是一类特殊的对象,它包含一个next()方法(在python3中是 __next__()方法),该方法的目的是进行到下一个结果,而在结束一系列结果之后,举出 StopItera ...
- 深入理解JVM虚拟机-2垃圾收集器
这里讨论的收集器基于JDK 1.7 Update 14之后的HotSpot虚拟机. 如果两个收集器之间存在连线,说明可以搭配使用.虚拟机所处的区域,则表示它是属于新生代收集器还是年老代收集器.在这里我 ...
- JQuery & Javascript
Jquery 是一个优秀的javascript框架,是轻量级的js库 jQuery简化了javascript 编程 jQuery很容易学习