<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        #div1

        {

            width: 100px;

            height: 100px;

            background-color: green;

            position: absolute;

            left:600px;

            top: 50px;

        }

        #div2

        {

            width:1px;

            height:300px;

            position:absolute;

            background-color:gray;

            left:300px;

            top:0px;

        }

    </style>

</head>

<script type="text/javascript">

    var timer = null;

    function Move() {

        var oDiv = document.getElementById("div1");

        timer = setInterval(function () {

            var speed = (300 - oDiv.offsetLeft) / 10;

            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            oDiv.style.left = oDiv.offsetLeft + Math.ceil(speed) + "px";

        }, 30);

    }

</script>

<body>

    <input type="button" id="btn" value="开始运动" onclick="Move()" />

    <div id="div1"></div>

    <div id="div2"></div>

</body>

</html>

　　

javascript加速运动的更多相关文章

  1. Javascript加速运动与减速运动

    加速运动,即一个物体运动时速度越来越快:减速运动,即一个物体运动时速度越来越慢.现在用Javascript来模拟这两个效果,原理就是用setInterval或setTimeout动态改变一个元素与另外 ...

  2. javascript按键盘上/右/下/左箭头加速运动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. javascript运动学教程

    本文系笔者学习原生javascript动效的笔记.内容基于某非著名培训机构的视频教程.并重新做了归类整理.删除了一些过时的内容.并重做了GIF图,加上了自己的一些分析. 一. 运动学基础 引子:从左到 ...

  4. 关于javascript的运动教程

    一.javascript的匀速运动 关于物体的javascript匀速运动要点分析: 1.物体关于运动的时候,我们要打开定时器 2.打开定时器的时候我们记得要在停止的时候关闭定时器,同时应该注意的是一 ...

  5. javascript运动系列第二篇——变速运动

    × 目录 [1]准备工作 [2]加速运动 [3]重力运动[4]减速运动[5]缓冲运动[6]加减速运动[7]往复运动[8]变速函数 前面的话 前面介绍过匀速运动的实现及注意事项,本文在匀速运动的基础上, ...

  6. 原生javascript写自己的运动库（匀速运动篇）

    网上有很多JavaScript的运动库,这里和大家分享一下用原生JavaScript一步一步写一个运动函数的过程,如读者有更好的建议欢迎联系作者帮助优化完善代码.这个运动函数完成后,就可以用这个运动函 ...

  7. 原生JavaScript中动画与特效的实现原理

    现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...

  8. JavaScript进阶【五】利用JavaScript实现动画的基本思路

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议

    软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...

随机推荐

  1. ARM寄存器的8种寻址方式01

    一.立即数寻址 操作数由指令本身给出 MOV r0,#0x0F //是所有寻址方式里面速度最快的,但是受到合法立即数的限制 立即数要求以#和$开头 十六进制,#后跟0x:十进制,#后直接加:八进制,# ...

  2. 自定义textbox加入左右晃动效果

    应用开发过程中经常会要求用户在textbox进行输入.例如:登陆,发布. 而一般没进行输入的时候我们都会简单的进行弹窗提示用户输入. 前阵子ios的同学搞了一个左右晃动的效果,觉得还不错,于是也搞了个 ...

  3. NDK jni 加载静态库

    加载静态库到android,静态库的提供方式有2种, a. 通过源文件来编译静态库 b. 加载已经编译好的静态库 首先我们来看,通过源文件来编译静态库,工程目录如下 第一步:我们来看我们的jni目录, ...

  4. 【风马一族_windom】 批量修改相同文件类型的后缀

    难题:有时因为某种原因,修改一堆文件的类型,重复操作次数多,浪费时间也跟着多,收获也会相当少. 提问:对于软件而言,可量化的,有规律的操作,可以使用程序来进行替代. 特性:在微软操作系统上,不同后缀的 ...

  5. div+css3实现的小丸子和爷爷

    HTML代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF- ...

  6. 基于php下载文件的详解

    本篇文章是对php下载文件进行了详细的分析介绍,需要的朋友参考下 php下载文件,比如txt文件. 出现的效果就是,弹出浏览器自带的下载框,出现另存为操作.有时候会出现内存溢出和超时的现象. 超时的话 ...

  7. 一道关于比赛胜负的Sql查询题目

    以前做过一道题目,一直没有来得及总结下来.贴图: 记得以前曾经找到了两种方法,今天试了一下,还是可以的,贴出过程: 下面是具体的查询方法: 原来放的是图片,今天又练习了一下,附代码: create T ...

  8. 关于C语言中的typedef

    在C语言中定义一个结构体,要最好使用typedef,使用typedef,实际上就是为我们的结构体起了一个新的名字,即定义了一个新的类型,在后面书写自己代码的时候,就可以直接使用自己定义的新的类型第一变 ...

  9. 系统中使用frameset和Iframe刷新页面session失效

    问题:Asp.net中每次刷新页面,session中保存的只就丢失 原因: 1.有些杀毒软件会去扫描web.config文件 2.程序内部有让session丢失的代码,或服务器内存不足 3.程序有框架 ...

  10. JNI 学习笔记

    JNI是Java Native Interface的缩写,JNI是一种机制,有了它就可以在java程序中调用其他native代码,或者使native代码调用java层的代码.也 就是说,有了JNI我们 ...