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的设计模式可以使我们的代码逻辑更加清晰,并且更加易于维护和重构 ...
随机推荐
- 邓_ Php·面试
1:PHP的意思,它能干什么? PHP是一个基于服务端来创建动态网站的脚本语言,您可以用PHP和HTML生成网站主页,英文的全称(Professional Home Pages)1.Web ...
- redis 参数配置总结
redis.conf 配置项说明如下 1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程 daemonize no 2. 当Redis以守护进程方式运行时, ...
- Ajax接收json响应
json? Json和xml比较 Ajax如何使用JSON Ajax接收json响应案例 什么是json?JSON (JavaScript Object Notation) 是一种轻量级的 ...
- R语言的帮助使用和图形功能简单介绍
R语言的帮助使用和图形功能简单介绍 R语言帮助,在Windows桌面下,有很多种.最长使用的是在命令行下help() > help.start() 会在浏览器中,打开帮助的主页 watermar ...
- 【Android】Eclipse自己主动编译NDK/JNI的三种方法
[Android]Eclipse自己主动编译NDK/JNI的三种方法 SkySeraph Sep. 18th 2014 Email:skyseraph00@163.com 一.Eclipse关联cy ...
- iOS：编译错误[__NSDictionaryM objectAtIndexedSubscript:]: unrecognized selector sent to instance 0xa79e61
这个意思是,__NSDictionaryM 无法将值传到下标索引对象,言简意赅就是数组越界.可是再看看,这是数组吗?不是,所以.遇到这样的crash,我这里有两种情况: 1.首先看看你 indexP ...
- Beginning Python From Novice to Professional (9) － Socket
Socket 小型server: #!/usr/bin/env python import socket s = socket.socket() host = socket.gethostname() ...
- bzoj1924: [Sdoi2010]所驼门王的宝藏
陈年老题又来水一发啊啊啊 构图狗了一点,然后其实强连通缩点dij找最长路就没了. 没调出来有点气,直接打了第9个点的表.... 来逛blog的你教教我呗 #include<cstdio> ...
- Swift - 使用CollectionView实现图片Gallery画廊效果（左右滑动浏览图片）
1,效果图 (1)图片从左至右横向排列(只有一行),通过手指拖动可以前后浏览图片. (2)视图滚动时,每张图片根据其与屏幕中心距离的不同,显示尺寸也会相应地变化.越靠近屏幕中心尺寸就越大,远离屏幕中心 ...
- zset 有序集合
zadd key score1 value1 score2 value2 .. 添加元素 redis 127.0.0.1:6379> zadd stu 18 lily 19 hmm 20 lil ...