<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

*{ margin:0;padding: 0;}

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

</style>

</head>

<body>

<button id="btn1">下</button>

<button id="btn2">上</button>

<div id="box"></div>

<script type="text/javascript">

    window.onload = function(){

        var btn1 = document.getElementById('btn1');

        var btn2 = document.getElementById('btn2');

        var box = document.getElementById('box');

        btn1.onclick = function(){

            move(box,'top',12,600,function(){

                move(box,'left',12,400)

            });

        }

        btn2.onclick = function(){

            move(box,'top',12,40,function(){

                move(box,'left',12,0)

            });

        }

        /*

            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 基础动画函数封装(一)

    <!DOCTYPE html> <html> <head> <title></title> <style type="tex ...

  2. 移动端滑屏全应用【一】cssHandler操作基础动画函数封装

    前言: 大家都知道,在移动端进行操作结点移动时,我们都会使用操作transform来代替top等用以提高性能,必要的时候还可开启3d加速.我们都会使用getComputedStyle来获取结点的最终样 ...

  3. 原生javascript 基础动画原理

    一.实现原理: 1.开定时器前先清除定时器 2.设置定时器 3.当前元素的位置 + 每一步的长度 4.当元素当前位置超过目标点时,把当前位置==目标点 5.设置元素位置,开始运动 6.判断当前位置如果 ...

  4. 原生JS实现动画函数的封装

    封装了一个JS方法,支持元素的基本动画:宽.高.透明度...等,也支持链式动画和同时运动. 获取元素的属性的函数并进行了兼容性处理: function getStyle(obj, attr) { if ...

  5. 浅谈原生JavaScript的动画和特效

    一.JavaScript中的动画原理 动画效果的实现总的来说可分为两种,一种是利用纯css实现,该方法在css3成熟后广泛应用:另外一种是通过JavaScript(或者一些封装的库如jQuery的an ...

  6. 原生JavaScript中动画与特效的实现原理

    现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...

  7. 移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）

    移动端 css3 transition 动画 ,requestAnimationFrame 动画  对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...

  8. 原生JavaScript运动功能系列（二）：缓冲运动

    匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...

  9. JavaScript基础学习-函数及作用域

    函数和作用域是JavaScript的重要组成部分,我们在使用JavaScript编写程序的过程中经常要用到这两部分内容,作为初学者,我经常有困惑,借助写此博文来巩固下之前学习的内容. (一)JavaS ...

随机推荐

  1. centos7搭建集群必知：centos7已经无iptables，只有firewall

    1.防火墙概述 centos7搭建集群,发现没有iptables,需要安装.防火墙为firewalle CentOS7默认的防火墙不是iptables,而是firewalle. CentOS 7.0默 ...

  2. 阿里巴巴Java编程规范考试

    阿里巴巴Java编程规范考试 今天在阿里云官网把阿里巴巴Java编程规范认证考试考过了, 写下这篇文章总结一下考试中需要注意的知识点, 主体内容还是要直接看规范: 编程规约 异常日志 单元测试 安全规 ...

  3. Codeforces Beta Round #4 (Div. 2 Only) D. Mysterious Present（LIS）

    传送门 题意: 现在我们有 n 个信封,然后我们有一张卡片,并且我们知道这张卡片的长和宽. 现给出这 n 个信封的长和宽,我们想形成一个链,这条链的长度就是这条链中所含有的信封的数量: 但是需要满足① ...

  4. ActiveMQ--配置端口

    配置端口 端口配置选项 一般最常用的URI是连接到代理的端口URI,通常为TCP或VM端口. 要注意空格:所有的URI都是基于java.net.URI类,它并不允许使用空格.所以,如果你使用failo ...

  5. 从http到https--phpStudy2018

    0. 将SSL证书解压到以下目录,申请方式见 百度 Apache/cert/ 分别更名为 my_public.crt my.key my_chain.crt 1. phpStudy->其它选项菜 ...

  6. linux 自动检测 IRQ 号

    驱动在初始化时最有挑战性的问题中的一个是如何决定设备要使用哪个 IRQ 线. 驱动需 要信息来正确安装处理. 尽管程序员可用请求用户在加载时指定中断号, 这是个坏做法, 因为大部分时间用户不知道这个号 ...

  7. Apache工具集

    commons-collections-3.2.jar 转自:http://www.open-open.com/lib/view/open1384437456993.html

  8. NuGet 如何设置图标

    在找 NuGet 的时候可以看到有趣的库都有有趣的图标,那么如何设置一个 NuGet 的图标 在开始之前,请在nuget官方网站下载 NuGet.exe 同时设置环境变量 环境变量设置的方法就是将 N ...

  9. 转：EBS-自动获取/创建CCID

    DECLARE l_ccid NUMBER; l_msg ); l_chart_of_account_id NUMBER; l_set_of_book_id NUMBER; BEGIN l_set_o ...

  10. Python反射笔记

    通过字符串的形式,导入模块.使用__import__ In [3]: SYS = __import__("sys") In [4]: SYS.path 如果导入模块在多级文件夹下 ...