定时器和函数的使用初级------移动一个div元素
在页面的动画效果中，经常有看到某个小块从一个地方移动到另一个地方的现象，现在，我们也来自己做一个这样的小动画，涉及到的基础包括定时器的使用和函数的使用
例如，我们要实现一个小方块从左面移动到右面，然后再从左面移动到右面，首先要做的事情是：
1.指定一个开关，点击的时候，开始左移或者开始右移
2.设置需要移动的元素块，为了醒目，我们把需要移动的元素设置背景为红色，设置定位属性为：绝对定位：absolute
3.开启一个定时器
4.设定需要移动的步长：speed
5.设置需要移动到的目标点：target
6.因为要移动元素，也就是要设置元素的left 属性，而获取元素属性的时候，不同的浏览器获取方式不一样，所以需要先写一个属性获取的函数，getStyle()
7.写一个左移的函数
8. 写一个右移的函数
需要注意的一点：定时器，使用的时候，记得先关后开，即使用前先清除
如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div.box {
position: relative;
}
div.tar {
top: 5em;
left: 2em;
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: #f33;
}
div.mubiao {
position: absolute;
left: 0;
width: 500px;
height: 200px;
border: 1px solid #888;
}
</style>
<script>
window.onload = function () {
var Ainput = document.getElementsByTagName("input");
var Odiv = document.getElementById("tar");
Odiv.timer = null;
var timer = null;
var speed = 10;
Ainput[0].onclick = function () {
clearTimeout(Odiv.timer);
Odiv.timer = setInterval(domoveleft, 100);
};
Ainput[1].onclick = function () {
clearTimeout(Odiv.timer);
Odiv.timer = setInterval(domoveright, 100);
};
function domoveleft() {
var Ocurleft = parseInt(getStyle(Odiv, 'left'));
var target = 500;
var Onextleft = Ocurleft + speed;
if (Onextleft >= target) {
Odiv.style.left = target + 'px';
clearTimeout(Odiv.timer);
} else {
Odiv.style.left = Onextleft + 'px';
}
};
function domoveright() {
var Ocurleft = parseInt(getStyle(Odiv, 'left'));
var target = 0;
var Onextleft = Ocurleft - speed;
if (Onextleft <= target) {
Odiv.style.left = target + 'px';
clearTimeout(Odiv.timer);
} else {
Odiv.style.left = Onextleft + 'px';
}
}
}
function getStyle(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, 'huanying2015')[attr];
}
</script>
</head>
<body>
<div class="box">
<input type="button" value="向右">
<input type="button" value="向左">
<div class="tar" id="tar"></div>
<div class="mubiao"></div>
</div>
</body>
</html>
运行结果：
上面的函数，可以简写如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div.box {
position: relative;
}
div.tar {
top: 5em;
left: 2em;
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: #f33;
}
div.mubiao {
position: absolute;
left: 0;
width: 500px;
height: 200px;
border: 1px solid #888;
}
</style>
<script>
window.onload = function () {
var Ainput = document.getElementsByTagName("input");
var Odiv = document.getElementById("tar");
Ainput[0].onclick = function () {
domove(Odiv, 'left', 10, 500);
};
Ainput[1].onclick = function () {
domove(Odiv, 'left', 10, 0);
}
function domove(obj, attr, speed, target) {
clearInterval(obj.timer);
var Ocurposition = parseInt(getStyle(obj, attr));
speed = Ocurposition < target ? speed : -speed;
obj.timer = setInterval(function () {
var Ocurposition = parseInt(getStyle(obj, attr));
var nextposition = Ocurposition + speed;
if (nextposition >= target && speed > 0 || nextposition <= target && speed < 0) {
nextposition = target;
}
obj.style[attr] = nextposition + 'px';
if (nextposition == target) {
clearInterval(obj.timer);
}
}, 100);
}
}
function getStyle(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, 'huanying2015')[attr];
}
</script>
</head>
<body>
<div class="box">
<input type="button" value="向右">
<input type="button" value="向左">
<div class="tar" id="tar"></div>
<div class="mubiao"></div>
</div>
</body>
</html>
运行的结果：是一样的：
定时器和函数的使用初级------移动一个div元素的更多相关文章
- 每天一个JavaScript实例-从一个div元素删除一个段落
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 你能相信吗？这些都是由一个DIV元素实现的动画，纯CSS3技术
http://www.webhek.com/misc/css-loaders
- 使一个div元素上下左右居中
第一种方法 浮动流自我调节 .box{ widht:200px; height:200px; position:relative; } .box .son{ width:100px; height:1 ...
- ytu 1050:写一个函数，使给定的一个二维数组（３×３）转置，即行列互换（水题）
1050: 写一个函数,使给定的一个二维数组(3×3)转置,即行列互换 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 154 Solved: 112[ ...
- 自己写一个swap函数交换任意两个相同类型元素的值 对空指针的使用 字节大小的判断（二）了解原理
验证的代码: #include <stdio.h> int main(){ char c = 'z'; ) + (c << ) + () + 'a'; printf(" ...
- javascript 在一个函数参数中包含另一个函数的引用
javascript函数的参数包含另一个函数的情形: <script> //b函数的参数func为另一个函数 function b(a, func) { alert(a); //调用参数 ...
- oracle 10G 没有 PIVOT 函数怎么办，自己写一个不久有了
众所周知,静态SQL的输出结构必须也是静态的.对于经典的行转列问题,如果行数不定导致输出的列数不定,标准的答案就是使用动态SQL, 到11G里面则有XML结果的PIVOT. 但是 oracle 10G ...
- 给你一个能生成1到5随机数的函数，用它写一个函数生成1到7的随机数。 (即，使用函数rand5()来实现函数rand7())
给你一个能生成1到5随机数的函数,用它写一个函数生成1到7的随机数. (即,使用函数rand5()来实现函数rand7()). 解答 rand5可以随机生成1,2,3,4,5:rand7可以随机生成1 ...
- coalesce函数-返回参数中第一个非null值
coalesce函数-返回参数中第一个非null值 学习了:http://www.cnblogs.com/zc_0101/archive/2009/08/11/1543650.html 这个要复杂一些 ...
随机推荐
- 获取Ueditor里面的图片列表，地址绝对化
/** * 内容中图片地址转成绝对地址 * @param $content * @return mixed */ private function imgUrl( ...
- C#中字符串大小比较函数--CompareTo与Compare方法(需要完善补充)
字符串比较的原理是什么? 原理: 从两个字符串的第一个字符开始逐个进行比较(按字符的ASCII值进行大小比较),直到出现不同的字符或遇到‘\0’为止. 如果全部字符都相同,就认为两字符串相等,返回0: ...
- 关于C#中break和continue的认识
1.在昨天我在做循环处理的时候,遇到了break和continue的使用问题,今天来总结了一下, break: for (int i=0;i<5;i++) { a++; if(a==1) bre ...
- Python学习二十八周（vue.js）
一.指令 1.一个例子简单实用vue: 下载vue.js(这里实用1.0.21版本) 编写html代码: <!DOCTYPE html> <html lang="en&qu ...
- 源代码安装-非ROOT用户安装软件的方法
0. 前言 如果你没有sudo权限,则很多程序是无法使用别人编译好的文件安装的. 还有时候,没有对应你的主机配置的安装包,这时候需要我们自己下载最原始的源代码,然后进行编译安装. 这样安装的程序 ...
- 洛谷P1219 ：八皇后（DFS+回溯）
题目描述 检查一个如下的6 x 6的跳棋棋盘,有六个棋子被放置在棋盘上,使得每行.每列有且只有一个,每条对角线(包括两条主对角线的所有平行线)上至多有一个棋子. 上面的布局可以用序列2 4 6 1 3 ...
- Js高级 事件冒泡
什么叫事件冒泡 当给父子元素的同一事件绑定方法时,触发了子元素身上的事件,执行完毕之后,也会触发父级元素的相同事件,这种传播机制叫事件冒泡. 取消事件冒泡 Event对象有个属性叫cancelBubb ...
- 学习笔记TF025:自编码器
传统机器学习依赖良好的特征工程.深度学习解决有效特征难人工提取问题.无监督学习,不需要标注数据,学习数据内容组织形式,提取频繁出现特征,逐层抽象,从简单到复杂,从微观到宏观. 稀疏编码(Sparse ...
- https://blog.csdn.net/doegoo/article/details/50749817
因为使用DiscuzX3.2进行系统的整合后,因为只是想在原J2EE的系统上增加论坛功能,而且J2EE中已经有一套用户的注册认证的体系,所以不需要在Discuz的系统中去注册以及登录功能,而是通过在J ...
- Javascript 香蕉分段吃（数组分隔）
Javascript 香蕉分段吃(数组分隔) function chunk(arr, size) { var newArr =[]; for(var i = 0; i < arr.length; ...