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的设计模式可以使我们的代码逻辑更加清晰,并且更加易于维护和重构 ...
随机推荐
- C 语言预编译 #if #else
这个方法我一般用来调试的时候用,有时候串口打印信息太多,一条条注释就很麻烦,于是就用这种方法,定义个宏变量,判断宏变量的条件,来达到改变宏变量的值控制那些代码编译,那些不编译的目的,这样就不用一条条代 ...
- CF789A. Anastasia and pebbles
/* CF789A. Anastasia and pebbles http://codeforces.com/contest/789/problem/A 水题 题意:有两个背包,每次分别可取k个物品, ...
- HDU 5167
范围 内的斐波那契的数不多,求出范围内的数,再暴力枚举即可. #include <iostream> #include <cstdio> #include <algori ...
- NOIP2012 同余方程 题解
描写叙述 求关于x的同余方程ax ≡ 1 (mod b)的最小正整数解. 格式 输入格式 输入仅仅有一行,包括两个正整数a, b,用一个空格隔开. 输出格式 输出仅仅有一行,包括一个正整数x0.即最小 ...
- android布局中显示隐藏动画
android 在布局中提供属性,能简单的加入动画效果,例如以下: <LinearLayout ... animateLayoutChanges="true" ... /&g ...
- NHibernate之旅(14)：探索NHibernate中使用视图
本节内容 引入 1.持久化类 2.映射文件 3.測试 结语 引入 在数据库操作中,我们除了对表操作,还有视图.存储过程等操作,这一篇和下篇来学习这些内容.这篇我们来学习怎样在NHibernate中使用 ...
- Hadoop问题记录：Wrong FS: hdfs://hp5-249:9000/, expected: file:///
一般在对文件操作的时候可能出现这个问题,可能是打开文件的时候出错,也可能是对文件夹进行遍历的时候出问题. 出现这样的问题通常是在eclipse中执行hadoop的时候出现,直接切换到shell下发送命 ...
- Spark Streaming概念学习系列之SparkStreaming运行原理
SparkStreaming运行原理 Spark Streaming不断的从数据源获取数据(连续的数据流),并将这些数据按照周期划分为batch. Spark Streaming将每个batch的数据 ...
- SparkSQL 与 Spark Core的关系
不多说,直接上干货! SparkSQL 与 Spark Core的关系 Spark SQL构建在Spark Core之上,专门用来处理结构化数据(不仅仅是SQL). Spark SQL在Spark C ...
- Python学习——爬虫篇
requests 使用requests进行爬取 下面是我编写的第一个爬虫的脚本 import requests # 导入reques ...