JS---最终版本--封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度
封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度
相较之前的,增加了2个判断,第一个判断是不是透明度,第二个判断是不是zindex, 都不是,就只是普通属性和之前一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
} div { width: 200px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
top: 0;
} input {
z-index: 10;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<div id="dv">
</div>
<script src="common.js"></script>
<script>
//点击按钮,改变宽度到达一个目标值,高度到达一个目标值 //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
function getStyle(element, attr) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
} function animate(element, json, fn) {
clearInterval(element.timeId);//清理定时器
//定时器,返回的是定时器的id
element.timeId = setInterval(function () {
var flag = true;//默认,假设,全部到达目标
//遍历json对象中的每个属性还有属性对应的目标值
for (var attr in json) {
//判断这个属性attr中是不是opacity
if (attr == "opacity") {
//获取元素的当前的透明度,当前的透明度放大100倍
var current = getStyle(element, attr) * 100;
//目标的透明度放大100倍
var target = json[attr] * 100;
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移动后的值
element.style[attr] = current / 100;
} else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
//层级改变就是直接改变这个属性的值
element.style[attr] = json[attr];
} else {
//普通的属性
//获取元素这个属性的当前的值
var current = parseInt(getStyle(element, attr));
//当前的属性对应的目标值
var target = json[attr];
//移动的步数
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移动后的值
element.style[attr] = current + "px";
}
//是否到达目标
if (current != target) {
flag = false;
}
}
if (flag) {
//清理定时器
clearInterval(element.timeId);
//所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
if (fn) {
fn();
}
}
//测试代码
console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
}, 20);
} //zIndex:1000
//透明度: 数字类型----小数---放大100倍
my$("btn1").onclick = function () { var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2};
animate(my$("dv"), json1, function () {
animate(my$("dv"), {"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000});
});
}; </script>
</body>
</html>
JS---最终版本--封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度的更多相关文章
- JS---封装缓动(变速)动画函数---增加任意多个属性&增加回调函数
封装缓动(变速)动画函数---增加任意多个属性&增加回调函数 回掉函数fn,在所有元素到达目的位置后,判断是否传入一个函数,有就调用 if(fn){fn()}; 这样一次点击,产生多个动画 & ...
- JS---封装缓动(变速)动画函数---增加任意一个属性
封装缓动(变速)动画---增加任意一个属性 1. 本来的变速动画函数,是获取特定的属性(之前案例是向右移动,所以获取的是left属性) 2. 现在改变为,获取任意一个属性,使其移动到指定的target ...
- GSAP JS基础教程--使用缓动函数
今天来了解一下缓动easeing函数. 开始,如果你还没有GSAP的类包,可以到GreenSock的官网去下载最新版本的类包,或者直接点击这里来下载 学习之前,先来准备一下: <!DO ...
- 网站建设中前端常用的jQuery+easing缓动的动画
网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...
- JS特效@缓动框架封装及应用
| 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.变量CSS样式属性获取/赋值方法 给属性赋值:(既能获取又能赋值) 1)div.style.width 单个赋值:点语法,这个方法比较固定 ...
- JS---封装缓动(变速)动画函数---增加多个任意多个属性
封装缓动动画函数---增加多个任意多个属性 在原来缓动动画函数,增加任意一个属性的基础上,做了如下改变 1. 原来function animate(element, attr, target),三个变 ...
- 【WPF学习】第五十一章 动画缓动
线性动画的一个缺点是,它通常让人觉得很机械且不能够自然.相比而言,高级的用户界面具有模拟真实世界系统的动画效果.例如,可能使用具有触觉的下压按钮,当单击时按钮快速弹回,但是当没有进行操作时它们会慢慢地 ...
- WPF界面设计技巧(7)—模拟电梯升降的缓动动画
原文:WPF界面设计技巧(7)-模拟电梯升降的缓动动画 如同Flash一样,WPF的亮点之一也在于其擅于表现平滑的动画效果,但以移动动画来说,仅凭简单的起始位置.目标位置,所产生的动画仍会非常生硬,这 ...
- js 变速动画函数
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ...
随机推荐
- sku二维数组里的数组从头到尾叠加组合
今天工作之余与同事聊天,要是实现一个sku描述里的字段组合的问题.并且实现了请吃饭.哈哈.一顿饭,我和另一位同事积极杠杆的.后来实现了出来. let skuList = [ ['黑色', '白色',' ...
- Mysql数据库调优和性能优化的21条最佳实践
Mysql数据库调优和性能优化的21条最佳实践 1. 简介 在Web应用程序体系架构中,数据持久层(通常是一个关系数据库)是关键的核心部分,它对系统的性能有非常重要的影响.MySQL是目前使用最多的开 ...
- 关于Go defer的详细使用
先抛砖引玉defer的延迟调用:defer特性: . 关键字 defer 用于注册延迟调用. . 这些调用直到 return 前才被执.因此,可以用来做资源清理. . 多个defer语句,按先进后出的 ...
- 这事没完,继续聊spring cloud stream和kafka的这些小事
上一篇文章讲了如何用spring cloud stream集成kafka,并且跑起来一个demo,如果这一次宣传spring cloud stream的文章,其实到这里就可以啦.但实际上,工程永远不是 ...
- 【并发编程】Object的wait、notify和notifyAll方法
本博客系列是学习并发编程过程中的记录总结.由于文章比较多,写的时间也比较散,所以我整理了个目录贴(传送门),方便查阅. 并发编程系列博客传送门 方法简介 wait方法 wait方法是Object类中的 ...
- C++ 入门第一篇 Hello Word
C++基础教程 ...
- Ubuntu中git pull远程仓库时显示403错误
# 报错内容 fatal: unable to access 'https://git.dev.tencent.com/chendongnan/sfedu_wx.git/': The requeste ...
- css优先级 中文版MDN补充翻译
原文地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity css的MDN中文版,这一页是讲css的优先级的. 读到文章的最后, ...
- 使用 SecureRandom 产生随机数采坑记录
公众号「码海」欢迎关注 背景 我们的项目工程里经常在每个函数需要用到 Random 的地方定义一下 Random 变量(如下) public void doSomethingCommon() { Ra ...
- 阿里巴巴主导的“华山版《Java 开发手册》”简介
1."83行代码计划"项目介绍(转自github): 2018年9月22日,在2018杭州云栖大会上,召开<码出高效:Java 开发手册>新书发布会,并宣布将图书所有收 ...