原生javascript 基础动画函数封装(二)
<!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 基础动画函数封装(二)的更多相关文章
- 原生javascript 基础动画函数封装(一)
<!DOCTYPE html> <html> <head> <title></title> <style type="tex ...
- 移动端滑屏全应用【一】cssHandler操作基础动画函数封装
前言: 大家都知道,在移动端进行操作结点移动时,我们都会使用操作transform来代替top等用以提高性能,必要的时候还可开启3d加速.我们都会使用getComputedStyle来获取结点的最终样 ...
- 原生javascript 基础动画原理
一.实现原理: 1.开定时器前先清除定时器 2.设置定时器 3.当前元素的位置 + 每一步的长度 4.当元素当前位置超过目标点时,把当前位置==目标点 5.设置元素位置,开始运动 6.判断当前位置如果 ...
- 原生JS实现动画函数的封装
封装了一个JS方法,支持元素的基本动画:宽.高.透明度...等,也支持链式动画和同时运动. 获取元素的属性的函数并进行了兼容性处理: function getStyle(obj, attr) { if ...
- 浅谈原生JavaScript的动画和特效
一.JavaScript中的动画原理 动画效果的实现总的来说可分为两种,一种是利用纯css实现,该方法在css3成熟后广泛应用:另外一种是通过JavaScript(或者一些封装的库如jQuery的an ...
- 原生JavaScript中动画与特效的实现原理
现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...
- 移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）
移动端 css3 transition 动画 ,requestAnimationFrame 动画 对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...
- 原生JavaScript运动功能系列（二）：缓冲运动
匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...
- JavaScript基础学习-函数及作用域
函数和作用域是JavaScript的重要组成部分,我们在使用JavaScript编写程序的过程中经常要用到这两部分内容,作为初学者,我经常有困惑,借助写此博文来巩固下之前学习的内容. (一)JavaS ...
随机推荐
- 2018-12-25-SourceYard-制作源代码包
title author date CreateTime categories SourceYard 制作源代码包 lindexi 2018-12-25 9:43:7 +0800 2018-12-09 ...
- vue-cil 打包爬坑（解决）
1.打包成功不报错,但是打开页面啥都没有? 解决:文件位置:config目录下index.js文件更改assetsPublicPath属性:文件里面有两个assetsPublicPath属性,也就是 ...
- Django入门7--博客撰写页面开发
- H3C 单路径网络中环路产生过程（3）
- P1049 找第K大的数
题目描述 给定一个无序正整数序列, 以及另一个数n (1<=n<=1000000), 然后以类似快速排序的方法找到序列中第n大的数(关于第n大的数:例如序列{1,2,3,4,5,6}中第3 ...
- LR性能测试自动化集成JENKINS
LR11不支持JENKINS集成,解决方案可以使用BAT代替执行,JENKINS定时调用BAT执行性能测试用例. 1. 先随便录制l一个LR脚本,保存为 D:\TEST\test01 2. 打开 ...
- linux一个进程如何睡眠
如果我们深入 <linux/wait.h>, 你见到在 wait_queue_head_t 类型后面的数据结构是非 常简单的; 它包含一个自旋锁和一个链表. 这个链表是一个等待队列入口, ...
- 小程序 scroll-view 左右横向滑动没有效果（无法滑动）问题
scroll-view 中的需要滑动的元素不可以用 float 浮动:
- ZR9.8普转提
ZR9.8普转提 A,B 打过的CF原题,不管了 C 确认过眼神,是我不会写的DP, 发现这个题目要求的过程类似与一个所有括号都不一样的括号匹配的过程 但是限制条件非常多,有点无从下手的感觉 我们设\ ...
- HDU - 1005 Number Sequence （矩阵快速幂）
A number sequence is defined as follows: f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1) + B * f(n - 2)) mo ...