<!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,12,600);

        }

        btn2.onclick = function(){

            move(box,-12,0);

        }

        /*

            obj:要运动的元素

            dir:步长

            target:目标点

        */

        function move(obj,dir,target){

            // 1、清除定时器

            clearInterval(obj.timer);

            // 2、设置定时器

            obj.timer = setInterval(function(){

                // 3、获取元素当前位置+步长

                var speed = obj.offsetLeft + dir;

                console.log(speed)

                // 4、如果元素当前位置超过目标点，则把当前位置==目标点

                if( speed > target && dir > 0 || speed < target && dir < 0){

                    speed = target

                }

                // 5、设置元素位置

                obj.style.left = speed + 'px';

                // 6、判断是否到达目标点，如果到达则停止定时器

                if(speed == target){

                    clearInterval(obj.timer);

                }

            },20)

        }

    }

</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. 移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）

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

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

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

  8. javascript基础(五)函数

    原文http://pij.robinqu.me/ 通过call和apply间接调用函数(改变this) call 和 apply带有多个参数,call和apply把当前函数的this指向第一个参数给定 ...

  9. （Frontend Newbie）JavaScript基础之函数

    函数可以说是任何一门编程语言的核心概念.要能熟练掌握JavaScript,对于函数及其相关概念的学习是非常重要的一步.本篇从函数的基本知识.执行环境与作用域.闭包.this关键字等方面简单介绍Java ...

随机推荐

  1. 央行下属的上海资信网络金融征信系统（NFCS）签约机构数量突破800家

    央行下属的上海资信网络金融征信系统(NFCS)签约机构数量突破800家 ——已接入NFCS的P2P网贷机构将优先 接入央行征信系统   P2P网贷行业的健康发展依赖于信用体系的支撑和保障,加快完善适应 ...

  2. 小程序与HTML5的区别

    小程序与传统HTML5还是有明显的区别,主要区别在于: 开发工具不同: 区别于H5的开发工具+浏览器Device Mode预览的模式,小程序的开发基于自己的开发者工具,可以实现同步本地文件+开发调试+ ...

  3. 初学ServiceMix

    因为老板给的毕业题目是ESB相关,需要学下ServiceMix(版本7.0.1) 但是SOA这东西技术上比较旧,加上主要是企业在用,个人学习的不多,所以资料比较少 CSDN上看到篇文章不错但是有些地方 ...

  4. luoguP4313 文理分科

    luoguP4313 文理分科 复习完之后做了道典型题目. 这道题条件有点多 我们逐个分析 如果没有\(sameart\)或者\(samescience\)的限制,就是一个裸的最大权闭合子图的问题了 ...

  5. dotnet 使用 lz4net 压缩 Stream 或文件

    在 dotnet 可以使用 LZ4 这个无损的压缩算法,这个压缩算法的压缩率不高但是速度很快.这个库支持在 .NET Standard 1.6 .NET Core .NET Framework Mon ...

  6. Simple Robot Gym - 101102I (思维）

    SaMer is building a simple robot that can move in the four directions: up (^), down (v), left (<) ...

  7. CP防火墙配置NAT

    Static NAT配置 Step1:创建host对象并且配置static NAT,如下图: Step2:修改全局属性的NAT项的ARP代理选项,勾选即可,如下图: Step3:在网关的web por ...

  8. 看各类框架源码淘来的一些JavaScript技巧

    1. 创建定长的JavaScript数组,并赋空值: 出自VUE文档Render函数讲解 // 创建定长20的JavaScript数组,并把每个项的值设为null Array.apply(null, ...

  9. 以windows服务方式快速部署免安装版Postgres数据库

    目录 以windows服务方式快速部署免安装版Postgres数据库 1.下载Postgresql数据库免安装包 2.安装环境准备及验证 解压文件 测试环境依赖 3.创建并初始化数据目录 创建数据目录 ...

  10. pyinstaller打包py脚本Warning：lib not found等相关问题

    小爬从使用Pyinstaller打包py为exe文件以来,一直都会碰到Warning:lib not found等相关问题,诸如: 虽然大多数时候,您像我一样忽略这些warning,打包后的exe也能 ...