一、js的运动

　　匀速运动

  1. 清除定时器
  2. 开启定时器
  3. 运动是否完成：a、运动完成，清除定时器；b、运动未完成继续

　　匀速运动停止条件：距离足够近  Math.abs(当然距离-目标距离) < 最小运动距离

div的匀速运动（简单运动）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:500px;}
span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;}

</style>
<script>
window.onload = function()
{
    var oBtn = document.getElementById('btn1');
    var oDiv = document.getElementById('div1');

    oBtn.onclick = function()
    {
        startMove(oDiv, 300);
    };
};
var timer = null;
function startMove(obj, iTarget)
{
    clearInterval(timer);
    timer = setInterval(function(){
        var iSpeed = 0;

        if(obj.offsetLeft < iTarget)
        {
            iSpeed = 7;
        }
        else
        {
            iSpeed = -7;
        }

        if( Math.abs( obj.offsetLeft - iTarget ) < 7 )
        {
            clearInterval(timer);
            obj.style.left = iTarget + 'px';
        }
        else
        {
            obj.style.left = obj.offsetLeft + iSpeed + 'px';
        }
    }, 30);
}
</script>
</head>

<body>
<button id="btn1">移动</button>
<div id="div1"></div>
<span></span>
</body>
</html>

javascript每日一练（九）——运动一：匀速运动的更多相关文章

  1. javascript每日一练—运动

    1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  2. javascript每日一练（十四）——弹性运动

    一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="u ...

  3. javascript每日一练（十二）——运动框架

    运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...

  4. javascript每日一练（十一）——多物体运动

    一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <h ...

  5. javascript每日一练（十）——运动二：缓冲运动

    一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意: ...

  6. javascript每日一练（十三）——运动实例

    一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  7. javascript每日一练（一）——javascript基础

    一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...

  8. javascript每日一练（八）——事件三：默认行为

    一.阻止默认行为 return false; 自定义右键菜单 <!doctype html> <html> <head> <meta charset=&quo ...

  9. javascript每日一练（七）——事件二：键盘事件

    一.键盘事件 onkeydown触发, keyCode键盘编码 ctrlKey altKey shiftKey 键盘控制div移动 <!doctype html> <html> ...

随机推荐

  1. xpage 获取 附件

    var db:NotesDatabase=session.getCurrentDatabase(); var doc:NotesDocument=db.getDocumentByUNID('80E21 ...

  2. python小游戏实现代码

    早上逛CSDN首页就见到这么一篇教程.看了一下很有意思,就马上动手实现了一下.看看效果吧: 完整代码: # -*- coding: utf-8 -*- # 1 - Import library imp ...

  3. NeHe OpenGL lession 4

    // lession4.c #include <OpenGL/OpenGL.h> #include <GLUT/GLUT.h> #include <stdio.h> ...

  4. 七、cocos2dx之粒子系统

    本文由qinning199原创,转载请注明:http://www.cocos2dx.net/?p=66 一.介绍 粒子系统指的是一个使用大量很小的精灵或者其他的一些绘制对象模拟一些模糊效果.使用传统的 ...

  5. CSS样式属性

    一.背景与前景 1.背景: 2.前景字体: (二)边界和边框 border(表格边框.样式等).margin(表外间距).padding(内容与单元格间距). margin(外边距)对自身不会有变化, ...

  6. ansible变量

    ansible变量 (部分内容摘自互联网,非官方,描述不一定正确) 变量种类: 内置变量facts: 自定义变量: 命令行传递的变量 roles传递的变量 主机变量 组变量 内置变量facts: 由远 ...

  7. js取一维数组最大值，最小值

    最近项目中遇到了,处理数组数据问题:     var newStrs=[1,2,3,4];               alert(Math.min.apply(null,newStrs));  // ...

  8. [LeetCode]题解（python）：016-3Sum Closest

    题目来源: https://leetcode.com/problems/3sum-closest/ 题意分析: 这道题目输入一个数组nums和一个数target,找出数组中三个数,使得他们的和最接近t ...

  9. Regex阅读笔记(五)java操作篇

    首先一个demo程序 Java的正则表达式包为java.util.regex,主要是使用其中的Pattern和Matcher. groupCount方法时候都可调用,而大多数方法都必须在匹配尝试成功之 ...

  10. Ubuntu上用premake编译GDAL

    GDAL的编译脚本呈现出不同平台不同解决方案的百花齐放现状.我是从windows平台开始编译GDAL的,用的自然是nmake.那就是一种每个目录下都需要写makefile文件的构建方法,写的人麻烦,我 ...