简单的抖动运动 主要利用offset left 和 setTimeout
<!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的更多相关文章
- java最简单的知识之创建一个简单的windows窗口,利用Frame类
作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 QQ986945193 微博:http://weibo.com/mcxiaobing 首先给大家看一下 ...
- 简单模拟struts2核心控制器利用反射原理实现参数传递和物理视图跳转
在能够运用struts2框架进行简单网站开发后,对struts2的一些较原框架强大的功能希望有更深刻的理解,于是尝试从底层开始摸索,本文就在重新学习struts2后,利用简单代码对核心控制器的主要功能 ...
- JS的运动1(从简单到复杂运动,从单一属性到多属性同时进行的运动过程分析)
js运动原理 运动基础 在js中,让一个元素动起来的最简单的方式,就是点击按钮,让元素移动.下面是一个简单的案例:(下面几个案例的的html和css都是采用这个为例) <!DOCTYPE htm ...
- Unity---动画系统学习(1)---在状态机中简单控制物体运动
1. 介绍 新建一个GameObject-Cube,在Window下添加Animation(快捷键ctrl+6).会添加用于播放动画的三个东西.物体上的Animator组件.Animator Cont ...
- spring Boot 简单的登录功能,利用了jdbcTemplate.class完成sql语句的执行,无需service层、dao层和.xml文件
1.搭建SpringBoot项目首先我们先在IDEA上创建一个SpringBoot的Web项目(1)file ——> new ——> project——> Spring Initia ...
- 简单的JS运动封装实例---侧栏分享到
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- javascript运动系列第四篇——抖动
× 目录 [1]原理介绍 [2]代码实现 [3]实例应用 前面的话 在运动系列中,前面分别介绍了匀速运动.变速运动和曲线运动.下面介绍一种特殊的运动形式——抖动 原理介绍 抖动其实是往复运动的一种特殊 ...
- javascript运动系列第八篇——碰壁运动
× 目录 [1]匀速碰壁 [2]自由落体 [3]投掷碰壁[4]拖拽碰壁 前面的话 碰撞运动可能是运动系列里面比较复杂的运动了.碰撞可以分为碰壁和互碰两种形式,而碰撞前后的运动形式也可以分为变速和匀速两 ...
- javascript运动系列第三篇——曲线运动
× 目录 [1]圆周运动[2]三维圆周 [3]钟摆运动 [4]抛物线[5]流体运动 前面的话 上一篇介绍了变速运动,但只实现了直线运动.如果元素的left和top同时运动,并遵循不同的曲线公式,则会进 ...
随机推荐
- spring框架学习(二)使用注解代替xml配置
注解 1.使用注解配置spring 1)开启使用注解代理配置文件 <?xml version="1.0" encoding="UTF-8"?> &l ...
- 小议 html 实体解析
今天分享个小技巧,是群里一个朋友问的,"请问 + 这种类型的字符串怎么转换成我们想要的字符 + ,有什么简便的js方法吗"其实问题说简单也简单,说难也难.我们要分情况来描述问题解决 ...
- flask_sqlalchemy的使用
第一配置文件 # coding:utf-8 DIALECT = 'mysql' DRIVER = 'pymysql' USERNAME = 'root' PASSWORD = ' HOST = '12 ...
- Markdown基础教程
标题 Markdown支持6种级别的标题,对应html标签 h1 ~ h6
- CSS marging相关
一.margin可以为负值 在盒模型中,内容区的width/height.padding.border都不能为负值,但是margin例外,它可以为负值. margin负值的本质,在于它改变了元素在普通 ...
- Oracle中Inventory目录作用以及如何重建此目录 oraInst.loc 文件
inventory 英 [ˈɪnvəntri] 美 [ˈɪnvəntɔ:ri] n. 清查; 存货清单; 财产目录,财产目录的编制; 存货总值; vt. 盘存; 编制…的目录; 开列…的清单; 总结 ...
- sys和os模块
一 sys 用于python解释器相关的操作 #!/usr/bin/env python # coding=utf-8 import time import sys def view_bar(num, ...
- IntelliJ IDEA 中安装junit插件
1.在Intellij IDEA 中安装了 Junit,TestNG插件,首先检查一下intellij IDEA 是否在安装时默认安装了这两个插件,检查方法 打开 settings -->Plu ...
- LeetCode(14):最长公共前缀
Easy! 题目描述: 编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 示例 1: 输入: ["flower",&qu ...
- TcxGrid Sqlite text类型 显示memo