<!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. Fragment学习（二）: 管理Fragment和Fragment通讯

    一. 管理Fragment 首先,如果你想在Android3.0及以下版本使用Fragment,你必须引用android-support-v4.jar这个包 然后你写的activity不能再继承自Ac ...

  2. Handler用法总结

    一.线程通讯问题 1.1 Message.Handler.Looper 在Android中提供了一种异步回调机制Handler,我们可以它来完成一个很长时间的任务. Handler基本使用: 在主线程 ...

  3. 2001年NOIP普及组复赛题解

    题目涉及算法: 数的计算:动态规划: 最大公约数和最小公倍数问题:质因数分解: 求先序排列:递归: 装箱问题:动态规划(纯0-1背包问题) 数的计算 题目链接:https://www.luogu.or ...

  4. 程序中打开IE浏览器并访问指定地址

    最简单的方法 Process.Start("iexplore.exe");  //直接打开IE浏览器(打开默认首页)            Process.Start(" ...

  5. win10 uwp 依赖属性

    本文告诉大家如何使用依赖属性,包括在 UWP 和 WPF 如何使用. 本文不会告诉大家依赖属性的好处,只是简单告诉大家如何使用 在 UWP 和 wpf ,如果需要创建自己的依赖属性,可以使用代码片,在 ...

  6. P1073 奇数还是偶数

    题目描述 给你 \(N(1 \le N \le 1000)\) 个数,你需要判断每个数是奇数还是偶数. 输入格式 输入的第一行包含一个整数 \(N(1 \le N \le 1000)\) . 接下来 ...

  7. java 菜单

    继承体系 MenuBar,Menu,MenuItem之间的关系: 先创建菜单条,再创建菜单,每一个菜单中建立菜单项. 也可以菜单添加到菜单中,作为子菜单. 通过setMenuBar()方法,将菜单添加 ...

  8. H3C 域名

  9. zookeeper(1)-概述

    ZooKeeper概述 ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现.它提供了简单原始的功能,分布式应用可以基于它实现更高级 ...

  10. CSS3 属性学习

    fill-available表示撑满可用空间(包括高度,宽度)[此处包括padding和margin会尽可能的撑满,只对于行内块(inline-block)和块元素(block)起作用,webkit内 ...