一、实现原理：

① 通过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. SSM整合 mybatis多条件查询与分页

    多条件查询与分页: 通过页面的houseName.floorage获取值传到前端视图(HouseSearchVO)实体类中的houseName,floorage建立houseSearchVO对象. 通 ...

  2. Python--day22--面向对象的交互

    Python里面自带的类和对象: 类名的作用: 类里面的与属性相关的对象self的运用: 实例化:就是创建一个对象 调用方法,类名.方法名(对象名) 执行步骤: 简写:alex.walk()等价于Pe ...

  3. Laravel基本使用、生成Cookie、返回视图、JSON/JSONP、文件下载及重定向

    https://yq.aliyun.com/ziliao/23889 1.Response篇 1.1 基本响应 最基本的HTTP响应只需在路由闭包或控制器动作中返回一个简单字符串即可,但是具体业务逻辑 ...

  4. Chrome 里的请求报错 " Provisional headers are shown"

    之所以会出现这个警告,是因为去获取该资源的请求其实并(还)没有真的发生; 背景:提交表单,按钮点击<button>标签,触发事件,ajax发送请求,服务器返回信息; <button& ...

  5. .gitkeep常用写法

    # win & OSX system files .DS_Store Thumbs.db ehthumbs.db Desktop.ini # IDE files .idea # project ...

  6. linux 内核定时器

    无论何时你需要调度一个动作以后发生, 而不阻塞当前进程直到到时, 内核定时器是给你 的工具. 这些定时器用来调度一个函数在将来一个特定的时间执行, 基于时钟嘀哒, 并且 可用作各类任务; 例如, 当硬 ...

  7. ajaxSetup()方法

    使用ajaxSetup()方法设置全局Ajax默认选项 使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为: ...

  8. Common Logging包装设计

    类设计 LogFactory根据当前环境加载具体的Log实现: 1.从缓存中加载LogFactory 2.从系统属性org.apache.commons.logging.LogFactory 中加载L ...

  9. CFEducational Codeforces Round 66题解报告

    CFEducational Codeforces Round 66题解报告 感觉丧失了唯一一次能在CF上超过wqy的机会QAQ A 不管 B 不能直接累计乘法打\(tag\),要直接跳 C 考虑二分第 ...

  10. location对象相关

    JS是由DOM(文档对象模型).BOM(浏览器对象模型).以及ECMA组成,而location对象是BOM中的一个非常重要的对象,所有关于地址栏信息的内容都在这里.了解location对象之前让我们先 ...