<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 100px;
height: 100px;
position: absolute;
left:300.54px;
background: red;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script>

var box=document.getElementById("box");

/*

left top 可以设置小数数值
并且获取得到的时候也可以得到小数数值

offsetLeft 获取的只能是整数！！

弹性运动不能用于样式不能为负数的
比如height padding

*/
function elasticSport(obj,oTarget){

obj.timer=null;//定时器

obj.oSpeed=0;//速度

obj.left=0; //left

clearInterval(obj.timer);

obj.timer=setInterval(function(){

obj.oSpeed+=(oTarget-obj.offsetLeft)/5;

//摩擦力 总是会停止
obj.oSpeed*=0.7;

obj.left+=obj.oSpeed;

//速度足够小 当前位置足够接近目标位置 停止计时器
if(Math.abs(obj.oSpeed<1) && Math.abs(obj.left-oTarget)<1){

clearInterval(obj.timer);
obj.style.left=oTarget+"px";

}

else{

obj.style.left=obj.left+"px";

}

document.title=obj.offsetLeft+" | 300";

},1000/60);

}

elasticSport(box,300);

</script>
</body>
</html>

简单的抖动运动 主要利用offset left 和 setTimeout的更多相关文章

  1. java最简单的知识之创建一个简单的windows窗口，利用Frame类

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 QQ986945193 微博:http://weibo.com/mcxiaobing 首先给大家看一下 ...

  2. 简单模拟struts2核心控制器利用反射原理实现参数传递和物理视图跳转

    在能够运用struts2框架进行简单网站开发后,对struts2的一些较原框架强大的功能希望有更深刻的理解,于是尝试从底层开始摸索,本文就在重新学习struts2后,利用简单代码对核心控制器的主要功能 ...

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

    js运动原理 运动基础 在js中,让一个元素动起来的最简单的方式,就是点击按钮,让元素移动.下面是一个简单的案例:(下面几个案例的的html和css都是采用这个为例) <!DOCTYPE htm ...

  4. Unity---动画系统学习(1)---在状态机中简单控制物体运动

    1. 介绍 新建一个GameObject-Cube,在Window下添加Animation(快捷键ctrl+6).会添加用于播放动画的三个东西.物体上的Animator组件.Animator Cont ...

  5. spring Boot 简单的登录功能，利用了jdbcTemplate.class完成sql语句的执行，无需service层、dao层和.xml文件

    1.搭建SpringBoot项目首先我们先在IDEA上创建一个SpringBoot的Web项目(1)file ——> new ——> project——> Spring Initia ...

  6. 简单的JS运动封装实例---侧栏分享到

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  7. javascript运动系列第四篇——抖动

    × 目录 [1]原理介绍 [2]代码实现 [3]实例应用 前面的话 在运动系列中,前面分别介绍了匀速运动.变速运动和曲线运动.下面介绍一种特殊的运动形式——抖动 原理介绍 抖动其实是往复运动的一种特殊 ...

  8. javascript运动系列第八篇——碰壁运动

    × 目录 [1]匀速碰壁 [2]自由落体 [3]投掷碰壁[4]拖拽碰壁 前面的话 碰撞运动可能是运动系列里面比较复杂的运动了.碰撞可以分为碰壁和互碰两种形式,而碰撞前后的运动形式也可以分为变速和匀速两 ...

  9. javascript运动系列第三篇——曲线运动

    × 目录 [1]圆周运动[2]三维圆周 [3]钟摆运动 [4]抛物线[5]流体运动 前面的话 上一篇介绍了变速运动,但只实现了直线运动.如果元素的left和top同时运动,并遵循不同的曲线公式,则会进 ...

随机推荐

  1. css框架，一把锋利的剑

    CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版.网格布局.表单样式.通用规则等代码块,用于简化web前端开发的工作,提高工作效率. 产生原因 互联网行业已经发展了多年,浏览 ...

  2. JavaScript1.6数组新特性和JQuery的几个工具方法

    JavaScript 1.6 引入了几个新的Array 方法,具体的介绍见:New in JavaScript 1.6 .这些方法已经被写进了ECMA262 V5.现代浏览器(IE9/Firefox/ ...

  3. python字典转datafarm，pandas

    # coding:utf-8 import json import pandas as pd with open("./article_file/all_article.json" ...

  4. 【API】文件操作编程基础-CreateFile、WriteFile、SetFilePointer

    1.说明 很多黑客工具的实现是通过对文件进行读写操作的,而文件读写操作实质也是对API函数的调用. 2.相关函数 CreateFile : 创建或打开文件或I/O设备.最常用的I/O设备如下:文件,文 ...

  5. 【坐在马桶上看算法】算法7：Dijkstra最短路算法

           上周我们介绍了神奇的只有五行的Floyd最短路算法,它可以方便的求得任意两点的最短路径,这称为“多源最短路”.本周来来介绍指定一个点(源点)到其余各个顶点的最短路径,也叫做“单源最短路径 ...

  6. 2018 ICPC 沈阳网络赛

    2018 ICPC 沈阳网络赛 Call of Accepted 题目描述:求一个算式的最大值与最小值. solution 按普通算式计算方法做,只不过要同时记住最大值和最小值而已. Convex H ...

  7. vs 连接过程报错 dll 分析 ------- DLL动态链接库

    1:编译成功,说明代码没有问题了2:连接报错,说明 exe 在查找dll 的入口地址过程,找不到合适的信息,这些信息保存在 dll 对应的 *.lib 文件里面  说明:exe如果生成成功了lib 这 ...

  8. java虚拟机规范(se8)——java虚拟机结构(二)

    2.5 运行时数据区域 java虚拟机定义了多个用于程序执行期间的运行时数据区域.这些数据区域中一些随着java虚拟机的启动而创建,随着虚拟机的退出而销毁.其他的数据区域时和线程相关的.线程相关数据区 ...

  9. 解决win10 关键错误开始菜单和cortana无法工作 的问题

    问题描述: 一次强制关机后出现了这个对话框,注销.重启均无法解决问题 解决过程[因为我用的英文版操作系统,所以截图都是英文,请大家自行对照自己的操作系统]: 1.ctrl+alt+del 打开任务管理 ...

  10. Laravel 自定义创建时间、更新时间字段

    Model 中,如果启动了 timestamps public $timestamps = true; 默认,laravel 会操作对应数据表的 created_at, updated_at 字段. ...