javascript每日一练(十四)——弹性运动
一、弹性运动
运动原理:加速运动+减速运动+摩擦运动;
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;} </style> <script> window.onload = function() { var oBtn = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn.onclick = function() { startMove(oDiv, 300); }; }; var iSpeed = 0; var left = 0; function startMove(obj, iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function(){ iSpeed += (iTarget - obj.offsetLeft)/5; iSpeed *= 0.7; left += iSpeed; if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){ clearInterval(obj.timer); obj.style.left = iTarget + 'px'; }else{ obj.style.left = obj.offsetLeft + iSpeed + 'px'; } }, 30); } </script> </head> <body> <input id="btn1" type="button" value="运动" /> <div id="div1"></div> <div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; "></div> </body> </html>
javascript每日一练(十四)——弹性运动的更多相关文章
- javascript每日一练(九)——运动一:匀速运动
一.js的运动 匀速运动 清除定时器 开启定时器 运动是否完成:a.运动完成,清除定时器:b.运动未完成继续 匀速运动停止条件:距离足够近 Math.abs(当然距离-目标距离) < 最小运动 ...
- javascript每日一练(十三)——运动实例
一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- javascript每日一练(四)——DOM二
一.DOM的创建,插入,删除 createElement(标签名) appendChild(节点) insertBefore(节点,原有节点) removeChild(节点) <!doctype ...
- 经典算法题每日演练——第十四题 Prim算法
原文:经典算法题每日演练--第十四题 Prim算法 图论在数据结构中是非常有趣而复杂的,作为web码农的我,在实际开发中一直没有找到它的使用场景,不像树那样的频繁使用,不过还是准备 仔细的把图论全部过 ...
- javascript每日一练—运动
1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...
- javascript每日一练(十二)——运动框架
运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...
- javascript每日一练(十)——运动二:缓冲运动
一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...
- javascript每日一练(十一)——多物体运动
一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <h ...
- javascript基础学习(十四)
javascript之表单对象 学习要点: 表单对象 文本框 按钮 单选框和复选框 一.表单对象 在HTML文档中可能会出现多个表单,也就是说,一个HTML文档中可能出现多个<form>标 ...
随机推荐
- CSS样式属性
一.背景与前景 1.背景: 2.前景字体: (二)边界和边框 border(表格边框.样式等).margin(表外间距).padding(内容与单元格间距). margin(外边距)对自身不会有变化, ...
- vim: 字符串替换
:s/str1/str2/ 替换当前行第一个 str1 为 str2:s/str1/str2/g 替换当前行所有 str1 为 str2 ( 注意, s/xx/xxx/g 语句从s开始,中间的空格视 ...
- php的迭代器
接口Iterator 主要需要实现的方法: abstract public mixed current ( void ) abstract public scalar key ( void ) abs ...
- Maven 版 JPA 最佳实践
项目结构图 数据库环境 数据库:MySQL 版本:5.x 数据库名:jpa-demo 用户名密码:root/1234 代码清单 1:数据库脚本: /* Navicat MySQL Data Trans ...
- matrix67:kmp算法详解
个人认为KMP是最没有必要讲的东西,因为这个东西网上能找到很多资料.但网上的讲法基本上都涉及到“移动(shift)”.“Next函数”等概念,这非常容易产生误解(至少一年半前我看这些资料学习KMP时就 ...
- IT第九天 - 包、访问修饰符、变量的内存分配、String类中常用方法
IT第九天 上午 包 1.包的命名规则:域名.项目名称.模块名 2.如:Wfei.com.windows.login 访问限制符 1.四种访问限制符分别对应为: (1)default:默认的,默认为p ...
- Java中static、final用法
一.final 1.final变量: 当你在类中定义变量时,在其前面加上final关键字,那便是说,这个变量一旦被初始化便不可改变,这里不可改变的意思对基本类型来说是其值不可变,而对于对象变量来说其引 ...
- Exploring the MapBox stack: MBTiles, TileJSON, UTFGrids and Wax
转自:http://blog.thematicmapping.org/2012/11/exploring-mapbox-stack-mbtiles-tilejson.html In my last b ...
- HDU4731+找规律
规律题!!! /* */ #include<algorithm> #include<iostream> #include<string.h> #include< ...
- SB中使用Autolayout设置到父视图的间距为0
发现打上钩的话在plus以下的屏幕上控件的实际x会是-4但是在plus上是0, 所以要设置一致的到视图的左右都未0 必须把Constrain to margins钩去掉!