javascript加速运动
<!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加速运动的更多相关文章
- Javascript加速运动与减速运动
加速运动,即一个物体运动时速度越来越快:减速运动,即一个物体运动时速度越来越慢.现在用Javascript来模拟这两个效果,原理就是用setInterval或setTimeout动态改变一个元素与另外 ...
- javascript按键盘上/右/下/左箭头加速运动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript运动学教程
本文系笔者学习原生javascript动效的笔记.内容基于某非著名培训机构的视频教程.并重新做了归类整理.删除了一些过时的内容.并重做了GIF图,加上了自己的一些分析. 一. 运动学基础 引子:从左到 ...
- 关于javascript的运动教程
一.javascript的匀速运动 关于物体的javascript匀速运动要点分析: 1.物体关于运动的时候,我们要打开定时器 2.打开定时器的时候我们记得要在停止的时候关闭定时器,同时应该注意的是一 ...
- javascript运动系列第二篇——变速运动
× 目录 [1]准备工作 [2]加速运动 [3]重力运动[4]减速运动[5]缓冲运动[6]加减速运动[7]往复运动[8]变速函数 前面的话 前面介绍过匀速运动的实现及注意事项,本文在匀速运动的基础上, ...
- 原生javascript写自己的运动库（匀速运动篇）
网上有很多JavaScript的运动库,这里和大家分享一下用原生JavaScript一步一步写一个运动函数的过程,如读者有更好的建议欢迎联系作者帮助优化完善代码.这个运动函数完成后,就可以用这个运动函 ...
- 原生JavaScript中动画与特效的实现原理
现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...
- JavaScript进阶【五】利用JavaScript实现动画的基本思路
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议
软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...
随机推荐
- HDU 1954 Subway tree systems (树的最小表示法)
题意:用一个字符串表示树,0代表向下走,1代表往回走,求两棵树是否同构. 分析:同构的树经过最小表示会转化成两个相等的串. 方法:递归寻找每一棵子树,将根节点相同的子树的字符串按字典序排列,递归回去即 ...
- 增量与位置PID
转载:http://blog.sina.com.cn/s/blog_408540af0100b17n.html http://bbs.ednchina.com/BLOG_ARTICLE_211739. ...
- 基于FPGA的图像去噪
目录 结构图 其中FPGA 控制模块为核心,通过它实现视频图像数据的获取.缓存.处理和控制各模块间通讯［1］.由CCD 相机对目标成像,高速图像数据由camera link 实时传输［2］,经信号转换 ...
- CentOS学习笔记--基本命令--目录的相关操作
Linux基本命令--目录的相关操作 常见的处理目录的命令吧: cd:变换目录 pwd:显示目前的目录 mkdir:创建一个新的目录 rmdir:删除一个空的目录 cd (变换目录) cd是Chang ...
- 已成功与服务器建立连接，但是在登录前的握手期间发生错误。 (provider: SSL Provider, error: 0 - 等待的操作过时)
今天忽然间发现远程连接别人数据库会出现 已成功与服务器建立连接,但是在登录前的握手期间发生错误. (provider: SSL Provider, error: 0 - 等待的操作过时) 这种情况 ...
- jQuery WIN 7透明弹出层效果
jQuery WIN 7透明弹出层效果,点击可以弹出一个透明层的jquery特效,插件可以调弹出框的宽度和高度,很不错的一个弹出层插件. 适用浏览器:IE8.360.FireFox.Chrome.Sa ...
- js读取json数据（php传值给js）
<?php $array =array('fds','fdsa','fdsafasd'); // json_encode($array); ?> <html> <hea ...
- Oracle 中的replace函数的应用
replace 函数用法如下: replace('将要更改的字符串','被替换掉的字符串','替换字符串') oracle 中chr()函数 CHR() --将ASCII码转换为字符 语法CHR(nu ...
- ios按钮点击后翻转效果
代码是网上找到的,不过找到的时候直接复制下来不能用,稍微整理下,为和我一样水平的菜鸟观摩一下下. (1)引入“QuartzCore.framework”库,头部引用. #include<Quar ...
- Hashmap in java
1. HashMap要点: 1.1 基本数据结构: 采用 数组+链表/平衡二叉查找树 的组合形式,所有键值对都以Entry<K,V>形式存储(每put进一个键值对,就会实例化一个Entr ...