<!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. HDU 2066最短路径Dijkstra、

    思路:枚举所有起点城市然后比较每个起点所去喜欢城市的最小距离 #include<cstdio> #include<cmath> #include<cstring> ...

  2. Java中方法的格式

    [修饰符] 返回值类型 方法名([参数类型 形式参数1,参数类型 形式参数2,……]) {             执行语句;     [return 返回值;]//需要的话 } 参数列表(参数的类型 ...

  3. 用jsonp 解决跨域问题

    想自己用 js写一个原生的ajax请求,访问本地文件,json/txt.但是demo,写了一个后,发现 原来是跨域了. js 写的原生ajax 请求代码如下 html代码 将获取的txt 文件 展示出 ...

  4. C# 获取 PC 序列号

    在 C++ 需要使用 GetSystemFirmwareTable 的方法来获得 PC 的序列号,需要写的代码很多,但是在 C# 可以使用 WMI 来拿到序列号 首先是安装 System.Manage ...

  5. H3C查看CF卡内的文件

    查看CF卡内的文件 <H3C>dir             //查看文件及目录文件 Directory of cf:/ -------------查看的是CF卡的内容      0    ...

  6. H3C配置console口密码

    方法一: [H3C]user-interface console 0 [H3C-ui-console0]authentication-mode password [H3C-ui-console0]se ...

  7. 2018-5-19-创建不带BOM-的UTF8

    title author date CreateTime categories 创建不带BOM 的UTF8 lindexi 2018-05-19 14:11:33 +0800 2018-2-13 17 ...

  8. Javascript中那些你不知道的事之-- false、0、null、undefined和空字符串

    话不多说直接进入主题:(如果有写的不对的地方欢迎指正) 我们先来看看他们的类型分别是什么: typeof类型检测结果 结论:false是布尔类型对象,0是数字类型对象,null是object对象,un ...

  9. [数论] hdu 5974 A Simple Math Problem (数论gcd)

    传送门 •题意 一直整数$a,b$,有 $\left\{\begin{matrix}x+y=a\\ LCM(x*y)=b \end{matrix}\right.$ 求$x,y$ •思路 解题重点:若$ ...

  10. mybatis 整合redis作为二级缓存

    核心关键在于定义一个RedisCache实现mytis实现的Cache接口 ** * @author tele * @Description RedisCache由于需要传入id, 由mybatis进 ...