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>标 ...
随机推荐
- android adb经常使用的命令
1.adb--- 订购屏幕截取 :adb shell screencap -p | sed 's/\r$//' > outputs.png 2.jni ---命令 :$NDK/ndk-b ...
- Android GPS应用:动态获取位置信息
在上文中,介绍了GPS概念及Android开发GPS应用涉及到的常用类和方法.在本文中,开发一个小应用,实时获取定位信息,包括用户所在的纬度.经度.高度.方向.移动速度等.代码如下: Activity ...
- js超简单日历
用原生js写了一个超级简单的日历.当做是练习js中的Date类型. 思路: 获取某个日期,根据年份计算出每个月的天数. 利用Date中的getDay()知道该月份的第一天为星期几. 循环创建表格,显示 ...
- if语句之猜拳
用计算机来生成随机数: Random rand = new Random();//做一个随机生成器,Random();后面的括号里面可以放一个随机生成器种子,这个种子只能为整数(int)int n = ...
- BZOJ 100题留念
- CentOS6.5安装elasticsearch+logstash+kibana
首先卸载低版本的java环境,然后安装 java环境和Apache服务 yum install -y java--openjdk httpd 安装ES环境 elasticsearch wget htt ...
- Nginx 之四: Nginx服务器的压缩功能和缓存功能
在Nginx服务器配置文件中可以通过配置Gzip的使用,可以配置在http块,server 块或者location块中设置,Nginx服务器可以通过ngx_http_gzip_module模块.ngx ...
- [LeetCode]题解(python):021-Merge Two Sorted Lists
题目来源: https://leetcode.com/problems/merge-two-sorted-lists/ 题意分析: 题目给出两个排好序的链表,将这两个链表整合成一个新的有序的链表. 题 ...
- C和指针---读书笔记。
C和指针---读书笔记.1,unsigned int 声明无符号int类型 默认是 singned,即此整数类型包括正负数.也可用于long上.说明符有 unsigned signed short ...
- 单点登录 .NET MVC
原文:单点登录 .NET MVC CAS 实现单点登录 .NET MVC 单点登录 Single Sign On,简称为 SSO,是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应 ...