<!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. NaN属性，isNaN函数

    NaN:Not a Number,顾名思义,表示不是一个数字. 可以把 Number 对象设置为该值,来指示其不是数字值. 使用 isNaN() 全局函数来判断一个值是否是 NaN 值 详见 Java ...

  2. VS2012中进行Web性能和负载测试

    问题1:无法使用ie进行录制 解决方法: 工具 >> 管理加载项 >> 在工具栏和扩展中找到发布者为Microsoft Corporation的Microsoft Web Te ...

  3. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

  4. RGB颜色二值化

    原理:RGB颜色根据计算'灰度'的公式,可以转化为黑白2种颜色,实现二值化. 业务场景的应用:可以根据背景颜色,取一个黑色或白色的颜色,作为背景色上的文案字体颜色 具体代码: function get ...

  5. 每日一“酷”之string

    介绍:string模块可以追溯到最早的Python版本中.现在很多的被移植为str和unicode对象的方法,在python3.0中会被完全去除.string模块中,有很多有用的常量和累,用来处理st ...

  6. HTTP 错误405.0 - Method Not Allowed

    在使用IIS发布网页的时候,出现下图这个问题 那么出现这个问题的原因可能有很多种,但是我目前是这么解决的,下面说一下我个人解决这个问题的方案,仅供参考. 首先,以管理员的身份启动cmd 如果电脑是64 ...

  7. Oracle 学习路径

    学习路线图: 学习的方法和思路: 有了google为什么还需要学习? 有了官方文档还需要学习了吗? 工作角色: 开发人员:SQL操作数据库,PL/SQL实现逻辑结构.企业需要最多.对逻辑思维要求比较高 ...

  8. DC-EPC小结

    今晚上修完了最后2个学时的EPC(课程主页),这意味着本学期的DC和共20个学时的EPC到此结束,这有可能是我人生中最后一次上英语课. Tom是我DC课的老师,EPC起于Tom和Micheal的Deb ...

  9. Google面试题及答案

    1. 村子里有100对夫妻,其中每个丈夫都瞒着自己的妻子偷情...村里的每个妻子都能立即发现除自己丈夫之外的其他男人是否偷情,唯独不知道她自己的丈夫到底有没有偷情.村里的规矩不容忍通奸.任何一个妻子, ...

  10. iOS多线程编程Part 2/3 - NSOperation

    多线程编程Part 1介绍了NSThread以及NSRunLoop,这篇Blog介绍另一种并发编程技术:NSOPeration. NSOperation & NSOperationQueue ...