<!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. spring+mybatis 整合

    项目目录: 一.导入pom.xml依赖 最下边有 二.在applicationContext.xml配置连接器和数据库的数据源 三.流程:用户请求数据,springmvc解析url,通过控制器和适配器 ...

  2. 你以为SSL是安全的吗？

    在现代的IT安全领域,很大程度上依赖SSL来保障通讯安全.但SSL是安全的吗? 在2005年,王小云证明SHA-1能在较短的时间内找到碰撞.王小云发现SHA-1的安全弱点是偶然还是必然? 就我所知,各 ...

  3. springboot 配置文件中属性变量引用方式@@解析

    这种属性应用方式是field_name=@field_value@. 两个@符号是springboot为替代${}属性占位符产生,原因是${}会被maven处理,所以应该是起不到引用变量的作用. @@ ...

  4. Linux 内核pci添加一个驱动

    一个 PCI 驱动被添加到 PCI 核心, 当它调用 pci_register_driver 函数时. 这个函数 只初始化 struct device_driver 结构, 这个结构包含在 struc ...

  5. TOJ4587:抓苹果(DP)

    传送门:抓苹果 dp(i,j) = max(dp(i-1,j-1),dp(i-1,j))+当i这分钟时能否刚好移动到这棵树下. 初始化是对不移动的情况下. 代码 #include<bits/st ...

  6. 【2016常州一中夏令营Day4】

    小 W 走迷宫[问题描述]小 W 被小 M 困在了一个方格矩阵迷宫里,矩阵边界在无穷远处,我们做出如下的假设:a. 每走一步时,只能从当前方格移动一格,走到某个相邻的方格上:b. 走过的格子立即塌陷无 ...

  7. ES6类的继承

    ES6 引入了关键字class来定义一个类,constructor是构造方法,this代表实例对象. constructor相当于python的init 而this 则相当于self 类之间通过ext ...

  8. Iptables&Firewalld防火墙

    一.IPtables 1.IPtables入门简介 Netfilter/Iptables(以下简称Iptables)是unix/linux自带的一款优秀且开放源代码的完全自由的基于包过滤的防火墙工具, ...

  9. STVD、IAR两种编译器比较

    1.全局查找功能: STVD:全局查找功能全局查找功能比较麻烦,有3个动作. IAR:有全局查找功能比较方便,只要一个动作,和KEIL一样. 2.编译时间 STVD:相对比较慢. IAR:相对快点. ...

  10. sybase的存储过程编写经验和方法

    1.如果用到其他库的Table或View,务必在当前库中建立View来实现跨库操作,最好不要直接使用“databse.dbo.table_name”,因为sp_depends不能显示出该SP所使用的跨 ...