javascript动画函数封装(升级版)
//把 任意对象 的 任意数值属性 改变为 任意的目标值
function animate(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var flag = true;
for (var k in json) {
if (k === "opacity") {//opacity要特殊处理
//opacity没有单位 参与运算自动转换成数值 所以不用parsetInt
//取值范围 0-1 0.1 0.33 33 为了让以前的计算公式生效 要扩大100倍
var leader = getStyle(obj, k) * 100;
var target = json[k] * 100;
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader / 100;//opacity没有单位
} else if (k === "zIndex") {
obj.style.zIndex = json[k];//层级不需要渐变 直接设置即可
} else {
var leader = parseInt(getStyle(obj, k)) || 0;
var target = json[k];
var step = (target - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
obj.style[k] = leader + "px";
}
if (leader != target) {
flag = false;
}
}
if (flag) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 15);
}
//全部属性都到达目标值才能清空
function getStyle(obj, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj, null)[attr];
} else {
return obj.currentStyle[attr];
}
}
javascript动画函数封装(升级版)的更多相关文章
- javascript动画函数封装
function animate(obj, target) { clearInterval(obj.timer); obj.timer = setInterval(function () { var ...
- 移动端 transition动画函数的封装(仿Zepto)以及 requestAnimationFrame动画函数封装(仿jQuery)
移动端 css3 transition 动画 ,requestAnimationFrame 动画 对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...
- 原生javascript 基础动画函数封装(二)
<!DOCTYPE html> <html> <head> <title></title> <style type="tex ...
- 原生javascript 基础动画函数封装(一)
<!DOCTYPE html> <html> <head> <title></title> <style type="tex ...
- 【前端】Util.js-ES6实现的常用100多个javaScript简短函数封装合集(持续更新中)
Util.js (持续更新中...) 项目地址: https://github.com/dragonir/Util.js 项目描述 Util.js 是对常用函数的封装,方便在实际项目中使用,主要内容包 ...
- 移动端滑屏全应用【一】cssHandler操作基础动画函数封装
前言: 大家都知道,在移动端进行操作结点移动时,我们都会使用操作transform来代替top等用以提高性能,必要的时候还可开启3d加速.我们都会使用getComputedStyle来获取结点的最终样 ...
- js变速动画函数封装 回调函数及层级还有透明度
//点击按钮,改变宽度到达一个目标值,高度到达一个目标值 //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { re ...
- javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽
运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...
- js 变速动画函数
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ...
随机推荐
- C# 时间日期(函数,解释)
C#时间/日期格式大全,C#时间/日期函数大全 有时候我们要对时间进行转换,达到不同的显示效果 默认格式为:2005-6-6 14:33:34 如果要换成成200506,06-2005,2005-6- ...
- deeplearning4j – 分布式DL开源项目
原文链接:http://www.52ml.net/16157.html Deeplearning4j is the first commercial-grade deep learning libra ...
- 编写模块时的声明(含MODULE_LICENSE等)(转)
编写模块必须先声明下面两句: #include <linux/module.h> //这个头文件包含了许多符号与函数的定义,这些符号与函数多与加载模块有关 #i ...
- win7/win10 未分配磁盘怎样创建扩展分区 也就是逻辑分区(转截)
我们有时候用windows7的磁盘管理工具对windows7系统分区管理的时候,我们可能会不小心把我们的电脑硬盘扩展分区都删除了,扩展分区变为了未分配的空间,这时候如果我们新建分区的话,建立的都是主分 ...
- luogu 3467 [POI2008]PLA-Postering 单调栈
题目描述: Description N个矩形,排成一排. 现在希望用尽量少的矩形海报Cover住它们. Input 第一行给出数字N,代表有N个矩形.N在[1,250000] 下面N行,每行给出矩形的 ...
- AppScan用来进行漏洞扫描
https://www.cnblogs.com/mawenqiangios/p/8573525.html
- loadrunner笔记----好记性不如烂笔头
1.Loadrunner主要由Vugen,Controller和Analyais3部分组成 2.简述描述集合点和集合点函数 集合点可以同步虚拟用户,以便能在同一时刻执行任务,集合点函数lr_rende ...
- POJ 1061 青蛙的约会( 拓欧经典题 )
链接:传送门 思路:简单拓展欧几里德,分析后可以得到方程 x + m * t = y + n * t + L * s( s控制圈数,t代表跳t次会碰面 ),经过化简可以得到 ( n - m ) * t ...
- OpenStack 发行版本
2010年7月,Rackspace和美国宇航局联合其他25家公司启动了OpenStack项目 OpenStack的发行版本时间表和核心项目 OpenStack发行版本 名称 日期 ...
- 搞定PHP面试 - 函数知识点整理
一.函数的定义 1. 函数的命名规则 函数名可以包含字母.数字.下划线,不能以数字开头. function Func_1(){ } //合法 function func1(){ } //合法 func ...