JavaScript div 上下运动实例
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{width:100px;height:100px;background: red;position:absolute;left:30px;top:50px; border-radius: 50px;}
</style>
<script type="text/javascript">
window.onload = function () {
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oDiv = document.getElementById('div1'); oBtn1.onclick = function () {
doMove(oDiv, -12, 10); // 直接就回到原点，原因是没判断大于小于号
} oBtn2.onclick = function () {
doMove(oDiv, 12, 800);
} // obj--移动对象，dir--方向，target--目标点
function doMove(obj, dir, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var speed = parseInt(getStyle(obj, 'left')) + dir;
if (speed > target && dir > 0) { // 往前跑
speed = target;
} if (speed < target && dir < 0) { // 往后跑
speed = target;
}
obj.style.left = speed + 'px'
if (speed == target) {
clearInterval(obj.timer);
}
}, 30)
} function getStyle(obj, attr) {
return getComputedStyle(obj)[attr];
}
}
</script>
</head> <body>
<input id="btn1" type="button" value="向前">
<input id="btn2" type="button" value="向后">
<div id="div1"></div>
</body> </html>
JavaScript div 上下运动实例的更多相关文章
- 关于javascript中静态成员和实例成员的详细解释
关于javascript中静态成员和实例成员的详细解释 在我们了解什么是静态成员和实例成员之前,我们首先来了解一下什么是实例? 实例就是由构造函数创建出来的对象. 例如案例中 p 就是实例: fun ...
- javascript链式运动框架案例
javascript链式运动框架 任务描述: 当鼠标移入红色矩形时,该矩形宽度逐渐增加至400px,之后高度逐渐增加至400px; 当鼠标移出红色矩形时,该矩形高度逐渐减小至200px,之后宽度逐渐减 ...
- javascript多物体运动案例：多物体淡入淡出
javascript多物体运动案例:多物体淡入淡出 任务描述: 补充代码,当鼠标移入红色区域时,该区域透明度逐渐增加至不透明;当鼠标移出该红色区域时,该区域透明度逐渐恢复至初始程度. 效果图: < ...
- JavaScript学习11 数组排序实例
JavaScript学习11 数组排序实例 数组声明 关于数组对象的声明,以前说过:http://www.cnblogs.com/mengdd/p/3680649.html 数组声明的一种方式: va ...
- div均匀分布代码实例
多个div在同一行以相同间隔分布: 这样的布局效果使用非常的频繁,也就是让多个div在一行分布,并且div于div之间的间隙是一样的,多用在对于产品的展示之用,下面就介绍一下如何实现此中布局,代码实例 ...
- JavaScript基础12——运动
运动原理 运动的原理: 让某件物品沿着某种方向随着时间的变化改变位置 setInterval(function(){ obox.style.left = obox.offsetLeft+10 ...
- javascript常用经典算法实例详解
javascript常用经典算法实例详解 这篇文章主要介绍了javascript常用算法,结合实例形式较为详细的分析总结了JavaScript中常见的各种排序算法以及堆.栈.链表等数据结构的相关实现与 ...
- javascript每日一练（十三）——运动实例
一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- Javascript单例模式概念与实例
前言 和其他编程语言一样,Javascript同样拥有着很多种设计模式,比如单例模式.代理模式.观察者模式等,熟练运用Javascript的设计模式可以使我们的代码逻辑更加清晰,并且更加易于维护和重构 ...
随机推荐
- Java工具类使用注意事项
(以下摘自阿里巴巴Java开发手册) 1. [强制]获取单例对象需要保证线程安全,其中的方法也要保证线程安全. 说明:资源驱动类.工具类.单例工厂类都需要注意. 5. [强制]SimpleDateFo ...
- Oracle数据库性能优化基础
1.数据处理分类OLTP,OLAP 2.Oracle特性 3.数据库优化方法论/原则 方法论:自顶向下优化和自底向上优化 3.1 自顶向下优化 3.2 自底向上优化 对于多年的老系统出现性能问题时,就 ...
- 2、深入学习基本结构——CNN
这节课主要简单复习一下CNN 从图中例子,1.3共享参数,2.4共享. 要看明白以上参数. 后面就是举例了. 比如声音信号 下面是zero padding 下面是pooling 还可以有mass po ...
- 【Codeforces 276C】Little Girl and Maximum Sum
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 最后的和. 其实可以看成是 ∑bi*ai 的形式. 这里的bi这个系数表示的是有多少个区间覆盖了ai这个元素. 既然这样的话. 那么 ...
- jQuery动画animate()的使用
自己定义动画效果: 使用方法:animate(js对象,运行时间.回调函数): js对象:{ }描写叙述动画运行之后元素的样式 运行时间:毫秒数 回调函数:动画运行结束后要运行的函数 html代码: ...
- linux下jenkins安装
在安装jenkins之前.首先确认jdk和tomcat,maven已经配置好 详细配置方法,请看的我博客. jdk:jdk的安装与配置 tomcat:tomcat的安装与配置 maven:maven的 ...
- 折腾开源WRT的AC无线路由之路-5
-在Mac上设置无password连接SSH 1. 生成SSH密钥对 <pre name="code" class="html">ssh-keyge ...
- Java IO 基础
早上复习了IO.NIO.AIO相关的概念,将其中一些要点记录一下. 从编程语言层面 BIO | NIO | AIO 以Java的角度,理解,linux c里也有AIO的概念(库),这些概念不知道什么原 ...
- TLP电源管理
笔记本电脑电池坏了, 换了块电池, 顺手装了一下这个电源管理软件. https://linrunner.de/en/tlp/docs/tlp-linux-advanced-power-manage ...
- Python—使用xml.sax解析xml文件
什么是sax? SAX是一种基于事件驱动的API. 利用SAX解析XML文档牵涉到两个部分:解析器和事件处理器. 解析器负责读取XML文档,并向事件处理器发送事件,如元素开始跟元素结束事件; 而事件处 ...