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的设计模式可以使我们的代码逻辑更加清晰,并且更加易于维护和重构 ...
随机推荐
- 一个简单的 PC端与移动端的适配(通过UA)
只需在header引用个js文件, 原理就是判断UA里面的标识. 加下面代码添加到js文件,在头文件引用即可 var Pc_url = 'http://www.baidu.com'; //PC端网址 ...
- HDU 4133
注意题目中的一句话:If a number m has bigger evaluating value than all the numbers smaller than it... 这让我重新想过反 ...
- 通达OA 小飞鱼工作流在线培训教程（一）HTML基础介绍
应一些刚接触工作流设计朋友的要求,这里开设一个系列教程,对通达OA工作流设计相关的内容做个介绍.方便解决一些日常经常出现的问题,希望对刚刚接触这部分工作的朋友能够有些帮助. 工作流设计须要多方面的知识 ...
- 数据可视化利器pyechart和matplotlib比较
python中用作数据可视化的工具有多种,其中matplotlib最为基础.故在工具选择上,图形美观之外,操作方便即上乘. 本文着重说明常见图表用基础版matplotlib和改良版pyecharts作 ...
- VC 对话框程序加入工具栏button图标及其buttontooltip
注意:本人使用VC++2010开发环境进行測试. 在使用VC开发对话框程序时不像开发单文档程序和多文档程序那么方便,非常多资源都须要自己手动加入.近期在开发一个程序时.想尝试在对话框程序里面加入 工具 ...
- BigInteger类型转换成Long类型或int类型问题
BigInteger bi = new BigInteger("123"); int i = bi.intValue(); lo ...
- 关于volatile的一些思考C++
在c++中,volatile用与修饰容易变动的变量,通常用于多线程的标志,编译器会存在代码优化,假如在同一个大括号中没有修改这么一个参数,那么编译器很可能在读取这个值的时候使用的是快取的方法,即将这个 ...
- IPv6系列-入门指南
本文是<IPv6系列>文章的第一篇<入门指南>,用于快速了解并上手IPv6. 小慢哥的原创文章,欢迎转载 目录 ▪ 一. 为什么要了解IPv6 ▪ 二. 顾虑:IPv6地址太复 ...
- ROS-单目摄像头标定
前言:由于摄像图内部与外部的原因,生成的图像往往会发生畸变,为了避免数据源造成的误差,需要针对摄像头的参数进行标定. ros官方提供了camera_calibration软件包进行摄像头标定. 一.安 ...
- SQLSERVER 链接服务器
1. 执行代码 EXEC sp_addlinkedserver @server='XLZFSqlServer', --链接服务器别名 @srvproduct='', @provider='SQLOLE ...