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的设计模式可以使我们的代码逻辑更加清晰,并且更加易于维护和重构 ...
随机推荐
- XML文件基础
https://c3d.club/xml/basic/2018/12/27/xml-file-base.html 1.文件头 XML文件头有XML声明与DTD文件类型声明组成.其中DTD文件类型声 ...
- PHP学习总结（4）——PHP入门篇之PHP计算表达式
计算表达式 不同于HTML和CSS,在php中我们可以做计算,比如我们写入echo 12*3计算机会计算出结果36.如下代码: <?php echo 12*3;?>
- BeanPostProcessor bean 的后置处理器
一. 自定 bean 的后置处理器 MyBeanPostProcessor 类.当你在初始化容器中的 bean 之前和之后,都会调用该处理器中的方法 @Component //将该后后置处理器加入到容 ...
- BA-Delta知识点
问题: DSM-RTR的网络负载能力是怎样的?每条总线带32个模块吗?MS/TP总线上的模块需要拨地址码吗?最大可以承载多少个点? 答:理论值是30,最佳性能是21个,一般情况25-28个 linkn ...
- codevs——T1048 石子归并
http://codevs.cn/problem/1048/ 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 题目描述 Descriptio ...
- Oracle-查看用户对象信息
--视图(可查看拥有者.对象名称.创建时间.上次修改时间) SELECT t.OBJECT_NAME, t.CREATED, t.LAST_DDL_TIME FROM user_objects t o ...
- 60款开源云应用【Part 3】(60 Open Source Apps You Can Use in the Cloud)
60款开源云应用[Part 3](60 Open Source Apps You Can Use in the Cloud) 本篇翻译自http://www.datamation.com/open-s ...
- codecombat之KithGard地牢19-37关代码分享
codecombat中国游戏网址:http://www.codecombat.cn/ 全部代码为javascript代码分享 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 19 ...
- @Autowired 凝视遇到的问题,@Qualifier 帮助解决这个问题
当候选 Bean 数目不为 1 时的应对方法 在默认情况下使用 @Autowired 凝视进行自己主动注入时,Spring 容器中匹配的候选 Bean 数目必须有且仅有一个. 当找不到一个匹配的 Be ...
- php之将用户信息写入数据库
session高级应用将用户信息写入到数据库中 首先建立数据库表 在实验数据库sqldb中建立session表,用于存储数据 在根文件夹下建立须要用到的文件(重点是session,class.php这 ...