一、实现原理：

① 通过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. Activiti学习之spring boot 与activiti整合

    声明:本文是springboot2.0的多项目构建,springboot2.0和spingboot1.5的配置是有出入的,构建项目之前请规范您的springboot版本,选择2.0以上. 一.在IDE ...

  2. iptables rc.firewall脚本代码

    #!/bin/sh # # rc.firewall - Initial SIMPLE IP Firewall script for Linux 2.4.x and iptables # # Copyr ...

  3. landi pos机

    2015年3月:联迪商用获得2014-2015中国金融POS机市场年度成功企业奖: 2014年5月:联迪商用入选2013年福州市纳税百强企业: 2013年12月:联迪商用入选2013年度中国电子商务物 ...

  4. 深入理解 Embedding层的本质

    继上文https://blog.csdn.net/weixin_42078618/article/details/82999906探讨了embedding层的降维效果,时隔一个月,分享一下嵌入层在NP ...

  5. vue echarts引用

    <template> <!--为echarts准备一个具备大小的容器dom--> <div id="main" style="width: ...

  6. springboot配置大全

    此配置大全是在官方开发者文档中看到的,地址:https://docs.spring.io/spring-boot/docs/1.5.6.RELEASE/reference/html/common-ap ...

  7. linux 使用 gdb

    gdb 对于看系统内部是非常有用. 在这个级别精通调试器的使用要求对 gdb 命令有信心, 需要理解目标平台的汇编代码, 以及对应源码和优化的汇编码的能力. 调试器必须把内核作为一个应用程序来调用. ...

  8. python3中map函数

    map函数是Python里面比较重要的函数 map函数后面必须接的是序列(元组/列表/字符串) 在python2中执行一些语句 >>> map(str,[1,2,3,4]) ['1' ...

  9. 从头学pytorch(三) 线性回归

    关于什么是线性回归,不多做介绍了.可以参考我以前的博客https://www.cnblogs.com/sdu20112013/p/10186516.html 实现线性回归 分为以下几个部分: 生成数据 ...

  10. layui treeSelect

    官方地址:https://fly.layui.com/extend/treeSelect/ 下面介绍一下这个插件的使用方法 1.html页面 <div class="layui-inp ...