一、实现原理：

① 通过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. 教你怎么让vi和vim显示行数

    首先我们来看看没有行号是多么难看. 2 再来看看有行号后的效果. 3 设置行号很简单. 我们要到命令模式下,输入set number :set number 按下回车 来看看效果 4 那么怎么关闭行号 ...

  2. Linux下FTP的安装和登陆

    对于一个经常接触电脑的人来说,FTP无形中出现在我们生活的各个角落.日常生活中的文件上传和下载很多时候就是依靠FTP去实现的. 专业的说,FTP 是File Transfer Protocol(文件传 ...

  3. Django入门2--Django的应用和开发第一个Template

    Django创建应用的命令: 应用的目录: 开发第一个Template:

  4. 4-1 自动生成spider模板的命令

    scrapy genspider 爬虫名 爬取得网站url例:scrapy genspider jobble2 blog.jobbole.com

  5. 第三章 通过java SDK 实现个性化智能合约的部署与测试

    想了解相关区块链开发,技术提问,请加QQ群:538327407 前提 已经部署好底层,外网可以正常请求访问. 正常流程 1.基础合约处理 https://fisco-bcos-documentatio ...

  6. 2019-2-28-C#-16-进制字符串转-int-

    title author date CreateTime categories C# 16 进制字符串转 int lindexi 2019-02-28 11:51:36 +0800 2018-04-2 ...

  7. java 布局管理器

    容器中的组件的排放方式,就是布局. 常见的布局管理器: FlowLayout(流式布局管理器)//目前最常用的 从左到右的顺序排列. Panel默认的布局管理器. BorderLayout(边界布局管 ...

  8. 【p083】传球游戏

    Time Limit: 1 second Memory Limit: 50 MB [问题描述] 上体育课的时候,小蛮的老师经常带着同学们一起做游戏.这次,老师带着同学们一起做传球游戏. 游戏规则是这样 ...

  9. P1077 旅行

    题目描述 你要进行一个行程为7000KM的旅行,现在沿途有些汽车旅馆,为了安全起见,每天晚上都不开车,住在汽车旅馆,你手里现在已经有一个旅馆列表,用离起点的距离来标识,如下: 0, 990, 1010 ...

  10. 中和IOS七层架构和TCP/IP四层架构的五层架构

    五层架构分别为应用层.运输层.网络层.数据链路层.物理层. IOS架构把应用层又细分为应用层.表示层.会话层 TCP/IP把网络层改名网际层,数据链路层和物理层结合成网络接口层 其实只要学习五层协议, ...