<!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. C# 操作XML学习笔记

    1. Customers.xml <?xml version="1.0" encoding="utf-8"?> <cust:customers ...

  2. 移动端遇到的bug (长期更新)

    移动端遇到的bug border-radius和transform在一起的bug 当父级设置了border-radius+overflow:hidden的时候,圆角是可以包住子级的,这是个很常见的场景 ...

  3. 2018-2-13-win10-uwp-获取指定的文件-AQS

    title author date CreateTime categories win10 uwp 获取指定的文件 AQS lindexi 2018-2-13 17:23:3 +0800 2018-2 ...

  4. mysql导入文件出现Data truncated for column 'xxx' at row 1的原因

    mysql导入文件的时候很容易出现"Data truncated for column 'xxx' at row x",其中字符串里的xxx和x是指具体的列和行数. 有时候,这是因 ...

  5. ZR1158

    ZR1158 http://www.zhengruioi.com/contest/446/problem/1158 给定限制的问题大多数都是容斥或者二分,或者二分之后容斥 首先,这个问题的第一步我们还 ...

  6. es6笔记 day3---Promise

    作用:解决异步回调问题 先知道它的大概语法就好了,这个东西需要平时用到才知道它的用处 语法: let promise= new Promise(function(resolve,reject){ // ...

  7. <QluOJ2018NewCode>计算几何（寄蒜几盒）

    题目描述 现在有一个圆圈,圆圈上有若干个点,请判断能否在若干个点中选择三个点两两相连组成一个等边三角形? 这若干个点在圆圈上按顺时针顺序分布. 如果可以的话输出"Yes"(不含引号 ...

  8. ansible核心模块playbook介绍

    ansible的playbook采用yaml语法,它简单地实现了json格式的事件描述.yaml之于json就像markdown之于html一样,极度简化了json的书写.在学习ansible pla ...

  9. Team Foundation Server 2015使用教程【10】：团队项目删除

  10. 安装 Daloradius

    安装Mariadb yum install -y mariadb-server mariadb systemctl start mariadb systemctl enable mariadb 初始设 ...