在页面的动画效果中，经常有看到某个小块从一个地方移动到另一个地方的现象，现在，我们也来自己做一个这样的小动画，涉及到的基础包括定时器的使用和函数的使用

例如，我们要实现一个小方块从左面移动到右面，然后再从左面移动到右面，首先要做的事情是：

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元素的更多相关文章

  1. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 你能相信吗？这些都是由一个DIV元素实现的动画，纯CSS3技术

    http://www.webhek.com/misc/css-loaders

  3. 使一个div元素上下左右居中

    第一种方法 浮动流自我调节 .box{ widht:200px; height:200px; position:relative; } .box .son{ width:100px; height:1 ...

  4. ytu 1050:写一个函数，使给定的一个二维数组（３×３）转置，即行列互换（水题）

    1050: 写一个函数,使给定的一个二维数组(3×3)转置,即行列互换 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 154  Solved: 112[ ...

  5. 自己写一个swap函数交换任意两个相同类型元素的值 对空指针的使用 字节大小的判断（二）了解原理

    验证的代码: #include <stdio.h> int main(){ char c = 'z'; ) + (c << ) + () + 'a'; printf(" ...

  6. javascript 在一个函数参数中包含另一个函数的引用

    javascript函数的参数包含另一个函数的情形: <script> //b函数的参数func为另一个函数 function b(a, func) {  alert(a); //调用参数 ...

  7. oracle 10G 没有 PIVOT 函数怎么办，自己写一个不久有了

    众所周知,静态SQL的输出结构必须也是静态的.对于经典的行转列问题,如果行数不定导致输出的列数不定,标准的答案就是使用动态SQL, 到11G里面则有XML结果的PIVOT. 但是 oracle 10G ...

  8. 给你一个能生成1到5随机数的函数，用它写一个函数生成1到7的随机数。 (即，使用函数rand5()来实现函数rand7())

    给你一个能生成1到5随机数的函数,用它写一个函数生成1到7的随机数. (即,使用函数rand5()来实现函数rand7()). 解答 rand5可以随机生成1,2,3,4,5:rand7可以随机生成1 ...

  9. coalesce函数-返回参数中第一个非null值

    coalesce函数-返回参数中第一个非null值 学习了:http://www.cnblogs.com/zc_0101/archive/2009/08/11/1543650.html 这个要复杂一些 ...

随机推荐

  1. php优秀框架codeigniter学习系列——CI_Output类的学习

    这篇文章主要介绍CI核心框架工具类CI_Output. 根据CI文档自己的定义,这个类主要就是生成返回的页面给浏览器.以下选取类中的重点方法进行说明. __construct() 在构造函数中,主要确 ...

  2. ubuntu 升级 python3.5到 python3.6

    首先是在Ubuntu中安装python3.6 sudo apt-get install software-properties-common sudo add-apt-repository ppa:j ...

  3. Windows10 VS2017 C++ Json解析（使用jsoncpp库）

    1.项目必须是win32 2.生成的lib_json.lib放到工程目录下 3.incldue的头文件放到工程目录,然后设置工程->属性->配置属性->vc++目录->包含目录 ...

  4. 关于WebAPI跨域踩到的一点坑

    最近在尝试前后端分离的WebAPI+AngularJS方案,在率先处理授权的时候,踩到了一点WebAPI跨域的坑,其实严格意义上来说也不算是坑吧,只是我自己对WebAPI不熟悉而已,这里我与大家分享一 ...

  5. Windows下用PIP安装scipy出现no lapack/blas resources found

    Windows下升级了pandas,但是发现scipy包随后引用出错,后来确认需重新安装scipy, 在用PIP安装scipy出现no lapack/blas resources found的错误,具 ...

  6. arch 安装准备--包管理的使用pacman

    -------https://wiki.archlinux.org/index.php/Pacman/Tips_and_tricks#List_of_installed_packageshttps:/ ...

  7. （32）forms组件（数据校验）

    forms组件的用处 1.就是用来做数据校验的 2.渲染页面 3.渲染错误信息(和局部刷新同效果) 数据校验 要使用forms组件必须要写一个类继承forms组件 urls.py from bbs01 ...

  8. java 中Math 的常用方法

    public class Demo{ public static void main(String args[]){ /** *Math.sqrt()//计算平方根 *Math.cbrt()//计算立 ...

  9. 第十一章 IO流

    11.IO流 11.1 java.io.File类的使用 1课时 11.2 IO原理及流的分类 1课时 11.3 节点流(或文件流) 1课时 11.4 缓冲流 1课时 11.5 转换流 1课时 11. ...

  10. 支付宝 生活号 获取 userId 和 生活号支付

    第一:申请生活号. 第二:激活开发者 模式 ,并且上创 自己的 公钥  ( 支付宝 demo 里面有 ) 第三: 配置 回调地址 ( 用于前端 调用获取 auth_code 的时候 填写的回调地址,支 ...