js 变速动画函数
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
function getStyle(element, attr) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
}
//变速动画函数封装增加任意多个属性和回调函数及层级还有透明度
//element元素 json对象 存储属性与值 fn为回调函数
function animate(element, json, fn) {
//清理定时器
clearInterval(element.timeid);
//设置定时器
element.timeid = setInterval(function () {
//假设全部到达目标
var f = true;
//循环去获取传入的数据
for (var i in json) {
//判断传入的值 是不是opacity
if (i == 'opacity') {
//获取当前opacity的值 并且放大100倍
var current = getStyle(element, i) * 100;
//把目标值也放大100倍
var target = json[i] * 100;
//移动的步数
var step = (target - current) / 10;
//判断是不是为0
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//移动后的位置
current += step;
//移动元素属性
element.style[i] = current / 100;
//判断属性是不是zIndex
} else if (i == 'zIndex') {
//直接设置zIndex
element.style[i] = json[i];
} else {
//普通属性获取(转化成数字)
var current = parseInt(getStyle(element, i));
//目标属性值
var target = json[i]
//移动的步骤(渐变)
var step = (target - current) / 10;
//判断移动的值取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//移动后的位置
current += step;
//移动元素
element.style[i] = current + 'px';
}
//只要有一个没达到目标就设置F为false
if (current != target) {
f = false;
}
//目标到达 清理定时器 判断有没有回调函数
if (f) {
clearInterval(element.timeid);
if (fn) {
fn();
}
}
}
console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
}, 20)
}
js 变速动画函数的更多相关文章
- js变速动画函数封装 回调函数及层级还有透明度
//点击按钮,改变宽度到达一个目标值,高度到达一个目标值 //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { re ...
- 从零开始学 Web 之 BOM(三)offset,scroll,变速动画函数
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 原生JS实现动画函数的封装
封装了一个JS方法,支持元素的基本动画:宽.高.透明度...等,也支持链式动画和同时运动. 获取元素的属性的函数并进行了兼容性处理: function getStyle(obj, attr) { if ...
- JS---封装缓动(变速)动画函数---增加多个任意多个属性
封装缓动动画函数---增加多个任意多个属性 在原来缓动动画函数,增加任意一个属性的基础上,做了如下改变 1. 原来function animate(element, attr, target),三个变 ...
- JS---封装缓动(变速)动画函数---增加任意一个属性
封装缓动(变速)动画---增加任意一个属性 1. 本来的变速动画函数,是获取特定的属性(之前案例是向右移动,所以获取的是left属性) 2. 现在改变为,获取任意一个属性,使其移动到指定的target ...
- JS---最终版本--封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度
封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度 相较之前的,增加了2个判断,第一个判断是不是透明度,第二个判断是不是zindex, 都不是,就只是普通属 ...
- JS---封装缓动(变速)动画函数---增加任意多个属性&增加回调函数
封装缓动(变速)动画函数---增加任意多个属性&增加回调函数 回掉函数fn,在所有元素到达目的位置后,判断是否传入一个函数,有就调用 if(fn){fn()}; 这样一次点击,产生多个动画 & ...
- js进阶 13 jquery动画函数有哪些
js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...
- js 封装一个均速动画函数
//动画函数---任意一个元素移动到指定的目标位置 //element为元素 target为位置 function carToon(element, target) { //设置一个定时器让他循环去增 ...
随机推荐
- 日常捕获的野生知识 - javascript获取屏幕大小
刚刚接触JavaScript,涉及到 document , window 的一些基本知识不是很了解,今天为了一个屏幕大小折腾了半天,幸好找到了很好的例子学习. 代码如下: <html> & ...
- strace for Android
使用strace for Android跟踪系统调用过程方便后续的so文件分析 http://benno.id.au/blog/2007/11/18/android-runtime-stracehtt ...
- 在Linux中安装redmine
Redmine是用Ruby开发的基于web的项目管理软件,是用ROR框架开发的一套跨平台项目管理系统. 如下即为安装步骤: (1)配置ruby环境,可用rvm进行安装匹配,参考http://ruby- ...
- toasf的苦水
http://blog.csdn.net/qq_25867141/article/details/52807705 优化 上面的几种方式我大致也都走了一遍,其实我觉得都没啥区别,看你喜欢用哪种吧.我其 ...
- SQLServer 2008 新增T-SQL 简写语法
1.定义变量时可以直接赋值 DECLARE @Id int = 5 2.Insert 语句可以一次插入多行数据 INSERT INTO StateList VALUES(@Id, 'WA'), (@I ...
- 30分钟学会JS AST,打造自己的编译器
这是一棵树嘛 直奔主题 抽象语法树是js代码另一种结构映射,可以将js拆解成AST,也可以把AST转成源代码.这中间的过程就是我们的用武之地. 利用 抽象语法树(AST) 可以对你的源代码进行修改.优 ...
- 【Leetcode】【Medium】Search Insert Position
Given a sorted array and a target value, return the index if the target is found. If not, return the ...
- DBMS_SQLTUNE使用方法
SQL调优工具包DBMS_SQLTUNE的使用方法 oracle 提供了优化建议功能包DBMS_SQLTUNE,该包可以帮助我们分析SQL,并提供优化建议. 原有执行计划alter session s ...
- February 17 2017 Week 7 Friday
The very essence of romance is uncertainty. 浪漫的精髓就在于它充满种种可能. If you want a happy life with enduring ...
- ZT JAVA WeakReference
JAVA WeakReference 分类: JAVA 2012-08-28 16:08 305人阅读 评论(0) 收藏 举报 javareferencehashmapcacheclassnull 在 ...