一、实现原理：

① 通过onoff开关，判断元素是往下走 还是往上走，并在每次清除定时器后，把onoff 设为 !onoff，以便下次点击做判断

②move函数的运用

二、代码

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

*{ margin:0;padding: 0;}

div{position: absolute; width:40px; height:40px; background: red; top: 0}

</style>

</head>

<body>

<div></div>

<script type="text/javascript">

    window.onload = function(){

        var box = document.getElementsByTagName('div'); //动态获取未来元素

        var len = 16;

        var str = '';

        var timer = null;

        var num = 0;

        var onoff = true; //点击开关

        // 动态生成div标签

        for (var i = 0; i < len; i++) {

            str += "<div style='left:"+(i*50)+"px;'></div>"

        }

        document.body.innerHTML = str;

        document.onclick = function(){

            // 清除定时器

            clearInterval(timer);

            // 判断往下还是往上

            if(onoff){

                // 开启定时器，让元素挨个往下掉

                timer = setInterval(function(){

                    move(box[num],'top',10,500);

                    num++;

                    // 当最后一个掉完，清除定时器，并把开关设为false，把num重置为0

                    if(num == len){

                        clearInterval(timer);

                        onoff = !onoff;

                        num = 0;

                    }

                },100)

            }else{

                // 开启定时器，让元素挨个往上走

                timer = setInterval(function(){

                    move(box[num],'top',10,0);

                    num++;

                    // 当最后一个升完，清除定时器，并把开关设为true，把num重置为0

                    if(num == len){

                        clearInterval(timer);

                        onoff = !onoff;

                        num = 0;

                    }

                },100)

            }

        }

        /*

            obj:要运动的元素

            attr:属性

            dir:步长

            target:目标点

            endFn:回调函数

        */

        function move(obj,attr,dir,target,endFn){

            //根据元素当前位置和目标点的比较，动态设置步长为正数或负数

            dir = parseInt( getStyle(obj,attr) ) < target ? dir : -dir;

            // 1、清除定时器

            clearInterval(obj.timer);

            // 2、设置定时器

            obj.timer = setInterval(function(){

                // 3、获取元素当前位置+步长

                var speed = parseInt( getStyle(obj,attr) )  + dir;

                // 4、如果元素当前位置超过目标点，则把当前位置==目标点

                if( speed > target && dir > 0 || speed < target && dir < 0){

                    speed = target

                }

                // 5、设置元素位置

                obj.style[attr] = speed + 'px';

                // 6、判断是否到达目标点，如果到达则停止定时器

                if(speed == target){

                    clearInterval(obj.timer);

                    // 回调函数，如果endFn存在则执行

                    endFn && endFn();

                }

            },20)

        }

        /*

            获取非行间样式：

            标准浏览器下 getComputedStyle(obj)[attr]

            IE浏览器下   obj.currentStyle[attr]

        */

        function getStyle(obj,attr){

            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];

        }

    }

</script>

</body>

</html>

　　

原生javascript 元素依次掉落及上升的更多相关文章

  1. 原生JavaScript技巧大收集(11~20)-(终于又被我找到这篇文章了)

    11.原生JavaScript加入收藏夹 function AddFavorite(sURL, sTitle) { try { window.external.addFavorite(sURL, sT ...

  2. 原生JavaScript技巧大收集100个

    原生JavaScript技巧大收集 1.原生JavaScript实现字符串长度截取function cutstr(str, len) { var temp; var icount = 0; var p ...

  3. 100个常用的原生JavaScript函数

    1.原生JavaScript实现字符串长度截取 复制代码代码如下: function cutstr(str, len) {    var temp;    var icount = 0;    var ...

  4. 原生JavaScript如何解决父元素查找指定类名的子元素的问题

    问题:已知一个元素的类名是right并且这个元素的祖先元素的类名为parent,现在想通过原生JavaScript获得这个类名为right的元素. 我的思路:利用递归.先判断已知的祖先元素(题中的pa ...

  5. 原生JavaScript支持6种方式获取元素

    一.原生JavaScript支持6种方式获取元素 document.getElementById('id'); document.getElementsByName('name'); document ...

  6. 原生javascript封装动画库

    ****转载自自己发表于牛人部落专栏的文章**** 一.前言 本文记录了自己利用原生javascript构建自己的动画库的过程,在不断改进的过程中,实现以下动画效果: 针对同一个dom元素上相继发生的 ...

  7. 浅谈 原生javaScript&&react 实现全局触摸按钮（附带对addeventlistener的了解）

    1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...

  8. 你可能不需要 jQuery！使用原生 JavaScript 进行开发

    很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery.因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 We ...

  9. 原生javascript模仿win8等待进度条。

    一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...

随机推荐

  1. laravel 常用文档

    [ Laravel 5.6 文档 ] 快速入门 —— 目录结构  laravel学院 http://laravelacademy.org/post/8657.html Laravel 的缓存系统    ...

  2. P1010 数值交换

    题目描述 输入两个数 \(a\) 和 \(b\) ,将两个数交换,并输出交换后的 \(a\) 和 \(b\) . 输入格式 输入两个整数 \(a,b(1 \le a,b \le 10^6)\) 输出格 ...

  3. 深度解读 - Windows 7核心图形架构细致分析(来自微软)

    编辑:马志文 时间: 2009-12-29 如现在大家所想的那样, Windows7 其实是 Windows Vista 的改进版. Windows 7 在 Windows Vista 的基础上进行了 ...

  4. 解决netcore在docker容器中连接oracle报错（timezone region not found）

    错误提示: timezone region not found错误原因:docker 容器内时区不是 CST 导致解决办法:1.在dockerfile 中增加一下命令ENV TZ=Asia/Shang ...

  5. 【Linux】一个定时任务小脚本

    需要一个定时任务,每隔固定时间停止,等待几分钟,然后在启动,每5分钟一个循环. 简要写了一下,如下,未来在优化: 3,8,13,18,23,28,33,38,43,48,53,58 * * * * s ...

  6. jQuery无new创建对象原理

    // jQuery 无new 创建对象套路 (function(g,undefined){ var foo = function(){ return new foo.fn.init(); }; foo ...

  7. Asp.NetCore3.1版本的CodeFirst与经典的三层架构与AutoFac批量注入

    Core3.1 CodeFirst与AutoFac批量注入(最下面附GitHub完整 Demo,由于上传网速较慢,这里就直接压缩打包上传了) ===Core3.1 CodeFirst 数据库为远程阿里 ...

  8. springboot 简单邮件发送

    写作原因: 项目接近尾声,需求一变再变,其实技术点从未改变,只是业务逻辑的变更,发送邮件提醒的功能,两个月变更七次.我想把技术点记录下来,这里无关乎业务,只有发送邮件的功能. 邮件发送准备说明: 由于 ...

  9. JAVA8学习——深入浅出函数式接口FunctionInterface（学习过程）

    函数式接口 函数式接口详解:FunctionInterface接口 话不多说,先打开源码,查阅一番.寻得FunctionInterface接口 package java.util.function; ...

  10. flask修改数据库字段的类型和长度

    flask修改数据库字段的类型和长度 ​ 在将models中的字段的db.String(256)修改为db.String(1024)后,执行migrate和upgrade操作后,发现数据库并没有更新, ...