一、实现原理：

① 通过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. 三种查看MySQL数据库版本的方法

    https://blog.csdn.net/hj7jay/article/details/51921504 1.使用-V参数 首先我们想到的肯定就是查看版本号的参数命令,参数为-V(大写字母)或者-- ...

  2. PTA 6-2 多项式求值

    PTA 6-2 多项式求值 本题要求实现一个函数 本题要求实现一个函数,计算阶数为n,系数为a[0] ... a[n]的多项式f(x)=∑i=0n(a[i]×xi)" role=" ...

  3. UVA 11996 Jewel Magic —— splay、序列的分裂与合并、LCP的哈希算法

    #include <cstdio> #include <cstdlib> #include <iostream> #include <algorithm> ...

  4. 记前端状态管理库Akita中的一个坑

    记状态管理库Akita中的一个坑 Akita是什么 Akita是一种基于RxJS的状态管理模式,它采用Flux中的多个数据存储和Redux中的不可变更新的思想,以及流数据的概念,来创建可观察的数据存储 ...

  5. React 简书

    create-react-app   jianshu yarn add styled-components -D       利用js写css样式  样式会更高效 https://github.com ...

  6. linux 读者/写者自旋锁

    内核提供了一个自旋锁的读者/写者形式, 直接模仿我们在本章前面见到的读者/写者旗标. 这些锁允许任何数目的读者同时进入临界区, 但是写者必须是排他的存取. 读者写者锁有 一个类型 rwlock_t, ...

  7. LuoguP5464 缩小社交圈

    LuoguP5464 缩小社交圈 背景:洛谷七月月赛T4 题目大意给定\(n\)个点,每个点的权值对应着一个区间\([l_i,r_i]\),两个点\(i,j\)有边当且仅当他们权值的并集不为空集,问有 ...

  8. com.netflix.discovery.DiscoveryClient : Completed shut down of DiscoveryClient

    启动报错:com.netflix.discovery.DiscoveryClient    : Completed shut down of DiscoveryClient 解决方案: 添加web主件 ...

  9. C# string和String的区别

    string是String的别名,功能没什么区别.但是具体代码约束如下

  10. Django学习小记1-安装配置

    Django是一个开放源代码的Web应用框架,由Python写成. python 中的web框架有许多例如:Django.Tornado.Flask..而Django相较与其他WEB框架其优势为:大而 ...